Kendo UI Angular DatePicker 移动滚动位置

Question

我使用了 Kendo UI Angular DatePicker 的基本用法示例。

但是，当单击 DatePicker 时，如果有滚动条，它会烦人地滚动到不同的位置以打开 DatePicker。

Html:

<kendo-datepicker ></kendo-datepicker>

package.json 看起来像：

"@progress/kendo-angular-dateinputs": "^2.2.0",
"@progress/kendo-angular-intl": "^1.4.0",
"@progress/kendo-angular-l10n": "^1.1.0",
"@progress/kendo-angular-popup": "^2.1.0",
"@progress/kendo-theme-default": "^2.50.0",

App.module.ts:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IntlModule } from '@progress/kendo-angular-intl';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    IntlModule,
    DateInputsModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

知道为什么它会改变滚动位置吗？

Answer 1

它是 Kendo 日期选择器上的错误。

我也遇到了同样的问题。但我找到了解决方法。

滚动发生在 DatePickerComponent 中的 toggleFocus() 函数上。

要解决此问题，您只需在组件中导入 DatePickerComponent。

import { DatePickerComponent } from "@progress/kendo-angular-dateinputs";

并在您的组件末尾添加这段代码。

(DatePickerComponent as any).prototype.toggleFocus = function() {};

应该是这样的。

import { Component } from "@angular/core";
import { DatePickerComponent } from "@progress/kendo-angular-dateinputs";

@Component({
  selector: "app-your-component",
  templateUrl: "./yourComponent.component.html",
})
export class YourComponent {}

(DatePickerComponent as any).prototype.toggleFocus = function() {};

Answer 2

所述问题是一个已知错误，由 DatePicker 执行的即时弹出内容聚焦引起。它在最近（在撰写本文时）Kendo Angular 弹出窗口中得到解决。要安装它，只需运行以下命令：

npm install @progress/kendo-angular-popup@2.2.0

有关此问题的更多详细信息，请参阅相关 Github 主题：

https://github.com/telerik/kendo-angular/issues/1459

Kendo UI Angular DatePicker 移动滚动位置

Kendo UI Angular DatePicker moves scroll position

datepicker

kendo-ui-angular2

angular