Angular版Kendo DateTimePicker如何修改弹窗默认时间为1:30 PM

你当前使用的组件代码如下，默认打开浮层选日期时预置时间为12:00 AM：

<kendo-datetimepicker [(value)]="dateValue" (valueChange)="dateChanged()"></kendo-datetimepicker>

要实现打开弹窗时默认展示1:30 PM的预置时间，可根据你使用的Kendo UI版本选择对应方案：

• 方案1：兼容所有版本，通过open事件设置默认值
  组件提供了open事件，会在浮层打开时触发，在事件回调中判断当前值状态，将未初始化的时间部分设置为13:30即可，不会覆盖用户已经手动选择的时间。
  第一步，给组件绑定open事件：

  <kendo-datetimepicker 
    [(value)]="dateValue" 
    (valueChange)="dateChanged()"
    (open)="onPickerOpen()"
  ></kendo-datetimepicker>
  

  第二步，在组件TS文件中添加事件处理逻辑：

  import { Component } from '@angular/core';
  
  @Component({
    /* 你的组件元配置 */
  })
  export class YourComponent {
    dateValue: Date | null = null;
    // 定义默认时间：13点30分（即1:30 PM）
    private targetDefaultHour = 13;
    private targetDefaultMinute = 30;
  
    dateChanged() {
      // 保留你原有的值变更处理逻辑
    }
  
    onPickerOpen() {
      // 无值时直接生成带默认时间的初始值
      if (!this.dateValue) {
        const initDate = new Date();
        initDate.setHours(this.targetDefaultHour, this.targetDefaultMinute, 0, 0);
        this.dateValue = initDate;
        return;
      }
      // 已选日期但时间为默认0点时，替换时间部分
      if (this.dateValue.getHours() === 0 && this.dateValue.getMinutes() === 0) {
        this.dateValue.setHours(this.targetDefaultHour, this.targetDefaultMinute, 0, 0);
        this.dateValue = new Date(this.dateValue);
      }
    }
  }
  

• 方案2：新版本原生配置实现（推荐）
  如果你使用的是v5.0以上版本的Kendo UI for Angular DateTimePicker，组件原生支持通过timePicker属性向内嵌的时间选择面板传递配置，直接指定默认时间即可，不需要写额外的事件逻辑：

  <kendo-datetimepicker 
    [(value)]="dateValue" 
    (valueChange)="dateChanged()"
    [timePicker]="{ defaultTime: new Date(0, 0, 0, 13, 30) }"
  ></kendo-datetimepicker>
  

  注意：如果使用该配置后默认时间不生效，说明你的组件版本较低，请切换到第一种方案实现。

内容的提问来源于stack exchange，提问作者Ahron M. Galitzky