Angular 9中Kendo DateTimePicker自定义UI匹配指定示例问题咨询

你要实现的是Kendo UI for jQuery版本的DateTimePicker交互效果，Angular版默认的单弹窗合并选择模式和目标效果不匹配，可通过组合DatePicker和TimePicker两个组件，配合逻辑和样式调整实现完全对齐的效果，具体实现步骤如下：

1. 依赖准备 #

首先确保你安装的Kendo UI for Angular版本为和Angular 9兼容的v7.x系列，之后在对应功能模块中引入所需依赖：

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    DateInputsModule
    // 其他你的模块依赖
  ]
})
export class YourModule { }

2. 组件模板实现 #

通过两个组件绑定同一个日期变量，隐藏TimePicker的输入框，保留交互能力：

<div class="custom-datetimepicker-wrapper">
  <!-- 日期选择器作为唯一可见输入框 -->
  <kendo-datepicker
    [(value)]="selectedDatetime"
    (valueChange)="handleDateSelected($event)"
    [format]="'yyyy-MM-dd HH:mm:ss'"
    [placeholder]="'选择日期时间'"
  >
  </kendo-datepicker>

  <!-- 时间选择器隐藏，仅保留弹窗能力 -->
  <kendo-timepicker
    #timePickerRef
    [(value)]="selectedDatetime"
    [format]="'HH:mm:ss'"
    [step]="{ hour: 1, minute: 1, second: 1 }"
    class="hidden-timepicker-input"
  >
  </kendo-timepicker>
</div>

3. 组件逻辑编写 #

控制日期选择完成后自动弹出时间选择面板，完全匹配目标交互逻辑：

import { Component, ViewChild } from '@angular/core';
import { TimePickerComponent } from '@progress/kendo-angular-dateinputs';

@Component({
  selector: 'app-custom-datetimepicker',
  templateUrl: './custom-datetimepicker.component.html',
  styleUrls: ['./custom-datetimepicker.component.css']
})
export class CustomDatetimepickerComponent {
  public selectedDatetime: Date = new Date();
  @ViewChild('timePickerRef') private timePicker!: TimePickerComponent;

  public handleDateSelected(selectedDate: Date): void {
    if (selectedDate) {
      // 日期选择完成后延迟100ms弹出时间选择面板，避免和日期弹窗关闭动画冲突
      setTimeout(() => {
        this.timePicker.toggle(true);
      }, 100);
    }
  }
}

4. 样式调整对齐UI #

添加样式将两个组件封装为单一输入框视觉效果，同时匹配目标UI的样式细节：

.custom-datetimepicker-wrapper {
  position: relative;
  display: inline-block;
  width: 280px;
}

.hidden-timepicker-input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 调整输入框样式匹配目标效果 */
.k-datepicker .k-input-inner {
  border: 1px solid #ccc;
  border-radius: 2px;
  padding: 4px 8px;
  font-size: 14px;
}

/* 调整弹窗样式匹配目标效果 */
.k-calendar, .k-timepicker-popup .k-time-list-container {
  border: 1px solid #ccc;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

5. 细节调整说明 #

如果需要完全匹配目标效果的细节，可修改对应组件的配置项：

• 需要显示周数：给DatePicker添加[weekNumber]="true"配置
• 需要调整时间步长：修改TimePicker的step参数即可
• 需要调整弹窗位置：修改两个组件的popupSettings配置项即可

内容的提问来源于stack exchange，提问作者Amit Singh