如何移除Kendo Angular DatePicker的‘Today’链接并限制仅选年份

1. 移除顶部“Today”链接 #

给kendo-datepicker添加[showToday]="false"属性，直接隐藏顶部的“Today”导航链接。

2. 限制仅能选择年份 #

将组件的bottomView和topView都设置为'year'，日历弹窗会直接展示年份选择视图，用户无法切换到月、日层级，只能选择年份。如果需要仅显示年份格式，可将format改为'yyyy'；若要保留原日期格式，选择年份后会自动填充该年的1月1日作为默认日期。

3. 禁用今日日期选择 #

通过[disabledDates]绑定一个判断函数，把今日日期标记为不可选。

修改后的完整代码 #

HTML模板：

<kendo-datepicker 
  formControlName="bg" 
  [bottomView]="'year'" 
  [topView]="'year'" 
  [format]="'yyyy'"
  [showToday]="false"
  [disabledDates]="disableToday">
</kendo-datepicker>

组件TS代码：

// 在组件类中添加以下函数
disableToday = (date: Date): boolean => {
  const today = new Date();
  // 精准匹配今日日期（忽略时分秒）
  return date.getFullYear() === today.getFullYear() &&
         date.getMonth() === today.getMonth() &&
         date.getDate() === today.getDate();
};

如果需要保留原格式'dd MMM yyyy'，只需将代码中的format值改回即可，选择年份后日期会显示为01 Jan [选中年份]的形式。

内容的提问来源于stack exchange，提问作者Nitin Jain