UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载本文围绕 ng-zorro-antd 日期选择器DatePicker官方示例 禁用 展开系统讲解nz-date-picker/nz-range-picker的三级禁用机制整体禁用nzDisabled、日期单元格禁用nzDisabledDate与时间选项禁用nzDisabledTime。结合官方示例源码与组件底层实现帮助你在表单与业务场景中精确控制日期选择器的不可用状态并理解每种禁用的生效范围与底层验证时机。一、日期选择器的三级禁用模型在 DatePicker API 文档 中与“禁用”相关的输入项共有三个它们作用在不同粒度上可单独使用也可组合使用输入项禁用粒度类型适用组件效果[nzDisabled]整个选择器booleannz-date-picker、nz-range-picker等全部模式输入框不可聚焦、不可编辑面板无法打开清除按钮隐藏[nzDisabledDate]日历中的单个单元格(current: Date) boolean日期 / 周 / 月 / 季 / 年选择器面板仍可打开和浏览但被判定为“禁用”的日期不可选中[nzDisabledTime]时间列中的单项见下文DisabledTimeFn配置了nzShowTime的日期选择器与范围选择器禁用特定小时、分钟、秒选项三者互不替代nzDisabled让组件整体不可交互nzDisabledDate和nzDisabledTime则是在面板保持可交互的前提下对可选范围做细粒度裁剪。官方示例正是围绕这三者组织的对应 disabled.ts 与 disabled-date.ts 两个演示组件。二、整体禁用nzDisabled2.1 官方示例禁用示例 对应的演示代码disabled.ts非常简洁覆盖了单日期、月份选择器与范围选择器三种形态Component({ selector: nz-demo-date-picker-disabled, imports: [NzDatePickerModule], template: nz-date-picker nzDisabled / br / nz-date-picker nzModemonth nzDisabled / br / nz-range-picker nzDisabled / }) export class NzDemoDatePickerDisabledComponent {}nzDisabled在模板中直接以布尔属性形式书写无需绑定。它在组件中的声明位于 date-picker.component.tsInput({ transform: booleanAttribute }) nzDisabled: boolean false;2.2 源码实现禁用到底影响什么从 NzDatePickerComponent 的模板与宿主绑定可以看出nzDisabled至少影响四个层面输入框层面内层input同时绑定原生disabled属性与ant-input-disabled样式类date-picker.component.ts#L112-L126因此输入框既不能获得焦点也不能编辑视觉上也呈现禁用灰态。宿主类层面host 绑定[class.ant-picker-disabled]nzDisableddate-picker.component.ts#L240-L253整个选择器外壳应用ant-picker-disabled类样式光标、背景色等随类名切换。弹层打开层面open()方法内置了禁用守卫nzDisabled为真时直接放弃打开逻辑date-picker.component.ts#L522-L533open(): void { if (this.nzInline()) { return; } if (!this.realOpenState !this.nzDisabled) { this.updateInputWidthAndArrowLeft(); this.overlayOpen true; this.nzOnOpenChange.emit(true); this.focus(); this.cdr.markForCheck(); } }由于点击输入框onClickInputBox最终也是走open()禁用状态下点击不会弹出日历面板(nzOnOpenChange)回调也不会触发。 4.清除按钮层面showClear计算属性中显式排除了禁用状态date-picker.component.ts#L545-L547get showClear(): boolean { return !this.nzDisabled !this.isEmptyValue(this.datePickerService.value) this.nzAllowClear; }即使nzAllowClear为true且当前有值禁用状态下也不会显示清除图标避免用户绕过禁用约束清空已选日期。2.3 表单集成下的禁用行为NzDatePickerComponent实现了ControlValueAccessor因此在 reactive form / template form 中可用[disabled]控制。其setDisabledState实现date-picker.component.ts#L853-L857有一个值得注意的细节setDisabledState(isDisabled: boolean): void { this.nzDisabled (this.isNzDisableFirstChange this.nzDisabled) || isDisabled; this.cdr.markForCheck(); this.isNzDisableFirstChange false; }首次变更时若模板中已显式声明nzDisabled会保留显式声明的禁用状态即“显式声明的禁用不被表单覆盖”此后则由表单的isDisabled值接管。这意味着模板显式禁用与表单disable()控制可以叠加使用且显式禁用具有优先语义。三、日期单元格级禁用nzDisabledDatenzDisabled解决的是“能不能用”而nzDisabledDate解决的是“哪些日期不能选”。其类型定义在 standard-types.tsexport type DisabledDateFn (d: Date) boolean;返回true的日期即被禁用。该函数在组件上的声明为date-picker.component.ts#L312Input() nzDisabledDate?: (d: Date) boolean;3.1 官方示例日期/时间禁用示例 中disabledDate实现“不可选择今天之前及今天”的业务规则并复用到月、季、年三种模式// 摘自 components/date-picker/demo/disabled-date.ts import { differenceInCalendarDays } from date-fns; today new Date(); disabledDate (current: Date): boolean // Can not select days before today and today differenceInCalendarDays(current, this.today) 0;nz-date-picker [nzDisabledDate]disabledDate / nz-date-picker nzModemonth [nzDisabledDate]disabledDate / nz-date-picker nzModequarter [nzDisabledDate]disabledDate / nz-date-picker nzModeyear [nzDisabledDate]disabledDate /同一个函数可以跨date/month/quarter/year模式复用因为每个模式的面板表格都会用它逐格判定。API 文档亦声明其类型为(current: Date) boolean见 date-picker.zh-CN.md。3.2 各模式表格中的判定实现nzDisabledDate经 inner-popup / date-range-popup 链路 传递到各模式表格组件在抽象基类 abstract-table.ts 中统一声明Input() disabledDate?: (d: Date) boolean;各表格组件在渲染单元格时调用它日期表格为每个单元格计算cell.isDisabled !!this.disabledDate?.(date.nativeDate)date-table.component.ts#L149被禁用的日期格子不可点击月份表格在计算“本月之前的最早可选日”等联动状态时通过!this.disabledDate(date.nativeDate)过滤禁用月份month-table.component.ts#L71-L78季度表格同样以this.disabledDate判定季度是否禁用quarter-table.component.ts#L71-L77年份表格以this.disabledDate判定年份禁用语义year-table.component.ts#L84-L91。从源码结构看nzDisabledDate的校验不仅在点击时生效还会参与面板内“今天”按钮、范围高亮、上下月导航可用范围等联动计算因此在实现自定义禁用规则时应保证函数幂等且无副作用因为它在一次面板渲染中会被多次调用。另外当用户在输入框直接键入一个被nzDisabledDate判为禁用的日期并失焦时checkAndClose()会通过panel.isAllowed(value)校验当前值合法性不合法则回滚到初始值并关闭面板date-picker.component.ts#L549-L573从交互闭环上保证禁用日期无法通过手输“绕过”。四、时间选项级禁用nzDisabledTime当日期选择器开启了nzShowTime后小时 / 分钟 / 秒三列会展开为可滚动的时间列此时可用nzDisabledTime禁用其中的具体选项。4.1 类型定义nzDisabledTime在 standard-types.ts 中的签名为export type DisabledTimeFn (current: Date | Date[], partial?: DisabledTimePartial) DisabledTimeConfig | undefined; export type DisabledTimePartial start | end; export interface DisabledTimeConfig { nzDisabledHours(): number[]; nzDisabledMinutes(hour: number): number[]; nzDisabledSeconds(hour: number, minute: number): number[]; }要点对nz-date-picker第一个参数current为当前所选日期Date对nz-range-picker则为日期区间Date[]第二个参数partial标明当前渲染的是**起始框start还是结束框end从而允许两端使用不同的禁用规则nzDisabledMinutes/nzDisabledSeconds是级联函数禁用哪些分钟取决于当前小时禁用哪些秒取决于当前小时与分钟适合实现“营业时间”这类依赖上级选项的规则返回值为undefined时等价于不限制。4.2 官方示例日期/时间禁用示例disabled-date.ts给出了单日期与范围两种典型写法。单日期选择器中禁用 423 点range(0, 24).splice(4, 20)取走 20 项即禁用 4-23 点、3059 分与 55/56 秒disabledDateTime: DisabledTimeFn () ({ nzDisabledHours: () this.range(0, 24).splice(4, 20), nzDisabledMinutes: () this.range(30, 60), nzDisabledSeconds: () [55, 56] });模板中配合nzShowTime打开时间列并用nzDefaultOpenValue指定面板打开时的默认时间nz-date-picker nzFormatyyyy-MM-dd HH:mm:ss [nzDisabledDate]disabledDate [nzDisabledTime]disabledDateTime [nzShowTime]{ nzDefaultOpenValue: timeDefaultValue } /范围选择器中利用partial参数对起始 / 结束两侧施加不同规则起始禁用 4-23 点、30-59 分结束禁用 20-23 点、0-30 分并开启nzHideDisabledOptions直接隐藏而非置灰被禁用的选项disabledRangeTime: DisabledTimeFn (_value, type?: DisabledTimePartial) { if (type start) { return { nzDisabledHours: () this.range(0, 60).splice(4, 20), nzDisabledMinutes: () this.range(30, 60), nzDisabledSeconds: () [55, 56] }; } return { nzDisabledHours: () this.range(0, 60).splice(20, 4), nzDisabledMinutes: () this.range(0, 31), nzDisabledSeconds: () [55, 56] }; };nz-range-picker [nzDisabledDate]disabledDate [nzDisabledTime]disabledRangeTime [nzShowTime]{ nzHideDisabledOptions: true, nzDefaultOpenValue: timeDefaultValue } nzFormatyyyy-MM-dd HH:mm:ss /4.3 与 nzShowTime 的协作nzDisabledTime依赖时间列的展开因此必须与nzShowTime配合才有意义。API 文档说明nzShowTime中当前支持的时间选择器参数包括nzFormat、nzHourStep、nzMinuteStep、nzSecondStep、nzDisabledHours、nzDisabledMinutes、nzDisabledSeconds、nzHideDisabledOptions、nzDefaultOpenValue、nzAddOn见 date-picker.zh-CN.md。这些选项的类型定义见 SupportTimeOptionsexport interface SupportTimeOptions { nzFormat?: string; nzHourStep?: number; nzMinuteStep?: number; nzSecondStep?: number; nzDisabledHours?(): number[]; nzDisabledMinutes?(hour: number): number[]; nzDisabledSeconds?(hour: number, minute: number): number[]; nzHideDisabledOptions?: boolean; nzDefaultOpenValue?: Date; nzAddOn?: TemplateRefvoid; nzUse12Hours?: boolean; }两条路径可以达成“禁用时间选项”静态禁用把nzDisabledHours/nzDisabledMinutes/nzDisabledSeconds直接写在nzShowTime对象里规则对所有日期相同动态禁用通过nzDisabledTime输入函数按当前日期及范围选择器的start/end侧动态返回禁用集合规则可随所选日期变化灵活度更高示例采用的即此方式。nzHideDisabledOptions: true会让被禁用的选项从列表中直接消失如示例中范围选择器的做法保持默认则禁用项仍可见但呈灰色不可点可按业务需要选择。五、选型建议与适用边界场景推荐能力说明表单草稿态 / 只读展示完全禁止操作nzDisabled输入框与面板全部不可交互清除按钮同步隐藏只能选“今天及以后”等业务日期规则nzDisabledDate面板可浏览禁用格不可选且覆盖日期 / 月 / 季 / 年面板限定可预约时段如营业时间内可选nzShowTimenzDisabledTime可按hour → minute → second级联禁用范围选择器可对起始 / 结束分别配置表单提交期间整体锁定表单[disabled]通过ControlValueAccessor.setDisabledState生效与显式nzDisabled可叠加显式声明优先适用前提与限制以当前仓库为准所有输入输出值均为原生Date范围选择器为Date[]日期运算可借助 date-fns 等工具库官方示例即使用differenceInCalendarDays、setHours见 disabled-date.ts禁用规则函数会在面板渲染中被反复调用应保持无副作用nzDisabledTime仅在配置了nzShowTime的形态下有意义部分 locale 依赖 Angular 自身的国际化支持需在应用入口注册对应语言包如registerLocaleData(zh)详见 DatePicker API 文档 与 日期适配器文档。六、延伸阅读官方示例禁用示例说明、禁用示例代码、日期/时间禁用示例说明、日期/时间禁用示例代码组件实现NzDatePickerComponent、类型定义 standard-types.ts、日期表格、月份表格API 文档DatePicker API中文相关示例基础用法、范围选择器、状态样式赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd 日期选择器禁用机制nzDisabledDate 与 nzDisabledTime 完全指南ng zorro antd 日期选择器禁用机制nzDisabledDate 与 nzDisabledTime 完全指南 在 ng zorro antd 的日期UI组件前端世界地图数据可视化5分钟掌握GeoJSON地理数据应用世界地图数据可视化5分钟掌握GeoJSON地理数据应用 你是否曾经想要创建交互式世界地图却因为复杂的地理数据而望而却步 world.geo.json 项目UI组件前端ng-zorro-antd组件状态持久化localStorage应用ng zorro antd组件状态持久化localStorage应用 为什么需要状态持久化 在Web应用开发中用户可能希望页面刷新或重新打开后保留之前的设置UI组件前端上一篇CMake项目模板终极选择指南7个步骤找到最适合你的启动方案下一篇DevToysMac本地化资源管理多语言文件的组织与维护创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
ng-zorro-antd DatePicker 禁用状态实战：nzDisabled、nzDisabledDate 与 nzDisabledTime 全解析
UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载本文围绕 ng-zorro-antd 日期选择器DatePicker官方示例 禁用 展开系统讲解nz-date-picker/nz-range-picker的三级禁用机制整体禁用nzDisabled、日期单元格禁用nzDisabledDate与时间选项禁用nzDisabledTime。结合官方示例源码与组件底层实现帮助你在表单与业务场景中精确控制日期选择器的不可用状态并理解每种禁用的生效范围与底层验证时机。一、日期选择器的三级禁用模型在 DatePicker API 文档 中与“禁用”相关的输入项共有三个它们作用在不同粒度上可单独使用也可组合使用输入项禁用粒度类型适用组件效果[nzDisabled]整个选择器booleannz-date-picker、nz-range-picker等全部模式输入框不可聚焦、不可编辑面板无法打开清除按钮隐藏[nzDisabledDate]日历中的单个单元格(current: Date) boolean日期 / 周 / 月 / 季 / 年选择器面板仍可打开和浏览但被判定为“禁用”的日期不可选中[nzDisabledTime]时间列中的单项见下文DisabledTimeFn配置了nzShowTime的日期选择器与范围选择器禁用特定小时、分钟、秒选项三者互不替代nzDisabled让组件整体不可交互nzDisabledDate和nzDisabledTime则是在面板保持可交互的前提下对可选范围做细粒度裁剪。官方示例正是围绕这三者组织的对应 disabled.ts 与 disabled-date.ts 两个演示组件。二、整体禁用nzDisabled2.1 官方示例禁用示例 对应的演示代码disabled.ts非常简洁覆盖了单日期、月份选择器与范围选择器三种形态Component({ selector: nz-demo-date-picker-disabled, imports: [NzDatePickerModule], template: nz-date-picker nzDisabled / br / nz-date-picker nzModemonth nzDisabled / br / nz-range-picker nzDisabled / }) export class NzDemoDatePickerDisabledComponent {}nzDisabled在模板中直接以布尔属性形式书写无需绑定。它在组件中的声明位于 date-picker.component.tsInput({ transform: booleanAttribute }) nzDisabled: boolean false;2.2 源码实现禁用到底影响什么从 NzDatePickerComponent 的模板与宿主绑定可以看出nzDisabled至少影响四个层面输入框层面内层input同时绑定原生disabled属性与ant-input-disabled样式类date-picker.component.ts#L112-L126因此输入框既不能获得焦点也不能编辑视觉上也呈现禁用灰态。宿主类层面host 绑定[class.ant-picker-disabled]nzDisableddate-picker.component.ts#L240-L253整个选择器外壳应用ant-picker-disabled类样式光标、背景色等随类名切换。弹层打开层面open()方法内置了禁用守卫nzDisabled为真时直接放弃打开逻辑date-picker.component.ts#L522-L533open(): void { if (this.nzInline()) { return; } if (!this.realOpenState !this.nzDisabled) { this.updateInputWidthAndArrowLeft(); this.overlayOpen true; this.nzOnOpenChange.emit(true); this.focus(); this.cdr.markForCheck(); } }由于点击输入框onClickInputBox最终也是走open()禁用状态下点击不会弹出日历面板(nzOnOpenChange)回调也不会触发。 4.清除按钮层面showClear计算属性中显式排除了禁用状态date-picker.component.ts#L545-L547get showClear(): boolean { return !this.nzDisabled !this.isEmptyValue(this.datePickerService.value) this.nzAllowClear; }即使nzAllowClear为true且当前有值禁用状态下也不会显示清除图标避免用户绕过禁用约束清空已选日期。2.3 表单集成下的禁用行为NzDatePickerComponent实现了ControlValueAccessor因此在 reactive form / template form 中可用[disabled]控制。其setDisabledState实现date-picker.component.ts#L853-L857有一个值得注意的细节setDisabledState(isDisabled: boolean): void { this.nzDisabled (this.isNzDisableFirstChange this.nzDisabled) || isDisabled; this.cdr.markForCheck(); this.isNzDisableFirstChange false; }首次变更时若模板中已显式声明nzDisabled会保留显式声明的禁用状态即“显式声明的禁用不被表单覆盖”此后则由表单的isDisabled值接管。这意味着模板显式禁用与表单disable()控制可以叠加使用且显式禁用具有优先语义。三、日期单元格级禁用nzDisabledDatenzDisabled解决的是“能不能用”而nzDisabledDate解决的是“哪些日期不能选”。其类型定义在 standard-types.tsexport type DisabledDateFn (d: Date) boolean;返回true的日期即被禁用。该函数在组件上的声明为date-picker.component.ts#L312Input() nzDisabledDate?: (d: Date) boolean;3.1 官方示例日期/时间禁用示例 中disabledDate实现“不可选择今天之前及今天”的业务规则并复用到月、季、年三种模式// 摘自 components/date-picker/demo/disabled-date.ts import { differenceInCalendarDays } from date-fns; today new Date(); disabledDate (current: Date): boolean // Can not select days before today and today differenceInCalendarDays(current, this.today) 0;nz-date-picker [nzDisabledDate]disabledDate / nz-date-picker nzModemonth [nzDisabledDate]disabledDate / nz-date-picker nzModequarter [nzDisabledDate]disabledDate / nz-date-picker nzModeyear [nzDisabledDate]disabledDate /同一个函数可以跨date/month/quarter/year模式复用因为每个模式的面板表格都会用它逐格判定。API 文档亦声明其类型为(current: Date) boolean见 date-picker.zh-CN.md。3.2 各模式表格中的判定实现nzDisabledDate经 inner-popup / date-range-popup 链路 传递到各模式表格组件在抽象基类 abstract-table.ts 中统一声明Input() disabledDate?: (d: Date) boolean;各表格组件在渲染单元格时调用它日期表格为每个单元格计算cell.isDisabled !!this.disabledDate?.(date.nativeDate)date-table.component.ts#L149被禁用的日期格子不可点击月份表格在计算“本月之前的最早可选日”等联动状态时通过!this.disabledDate(date.nativeDate)过滤禁用月份month-table.component.ts#L71-L78季度表格同样以this.disabledDate判定季度是否禁用quarter-table.component.ts#L71-L77年份表格以this.disabledDate判定年份禁用语义year-table.component.ts#L84-L91。从源码结构看nzDisabledDate的校验不仅在点击时生效还会参与面板内“今天”按钮、范围高亮、上下月导航可用范围等联动计算因此在实现自定义禁用规则时应保证函数幂等且无副作用因为它在一次面板渲染中会被多次调用。另外当用户在输入框直接键入一个被nzDisabledDate判为禁用的日期并失焦时checkAndClose()会通过panel.isAllowed(value)校验当前值合法性不合法则回滚到初始值并关闭面板date-picker.component.ts#L549-L573从交互闭环上保证禁用日期无法通过手输“绕过”。四、时间选项级禁用nzDisabledTime当日期选择器开启了nzShowTime后小时 / 分钟 / 秒三列会展开为可滚动的时间列此时可用nzDisabledTime禁用其中的具体选项。4.1 类型定义nzDisabledTime在 standard-types.ts 中的签名为export type DisabledTimeFn (current: Date | Date[], partial?: DisabledTimePartial) DisabledTimeConfig | undefined; export type DisabledTimePartial start | end; export interface DisabledTimeConfig { nzDisabledHours(): number[]; nzDisabledMinutes(hour: number): number[]; nzDisabledSeconds(hour: number, minute: number): number[]; }要点对nz-date-picker第一个参数current为当前所选日期Date对nz-range-picker则为日期区间Date[]第二个参数partial标明当前渲染的是**起始框start还是结束框end从而允许两端使用不同的禁用规则nzDisabledMinutes/nzDisabledSeconds是级联函数禁用哪些分钟取决于当前小时禁用哪些秒取决于当前小时与分钟适合实现“营业时间”这类依赖上级选项的规则返回值为undefined时等价于不限制。4.2 官方示例日期/时间禁用示例disabled-date.ts给出了单日期与范围两种典型写法。单日期选择器中禁用 423 点range(0, 24).splice(4, 20)取走 20 项即禁用 4-23 点、3059 分与 55/56 秒disabledDateTime: DisabledTimeFn () ({ nzDisabledHours: () this.range(0, 24).splice(4, 20), nzDisabledMinutes: () this.range(30, 60), nzDisabledSeconds: () [55, 56] });模板中配合nzShowTime打开时间列并用nzDefaultOpenValue指定面板打开时的默认时间nz-date-picker nzFormatyyyy-MM-dd HH:mm:ss [nzDisabledDate]disabledDate [nzDisabledTime]disabledDateTime [nzShowTime]{ nzDefaultOpenValue: timeDefaultValue } /范围选择器中利用partial参数对起始 / 结束两侧施加不同规则起始禁用 4-23 点、30-59 分结束禁用 20-23 点、0-30 分并开启nzHideDisabledOptions直接隐藏而非置灰被禁用的选项disabledRangeTime: DisabledTimeFn (_value, type?: DisabledTimePartial) { if (type start) { return { nzDisabledHours: () this.range(0, 60).splice(4, 20), nzDisabledMinutes: () this.range(30, 60), nzDisabledSeconds: () [55, 56] }; } return { nzDisabledHours: () this.range(0, 60).splice(20, 4), nzDisabledMinutes: () this.range(0, 31), nzDisabledSeconds: () [55, 56] }; };nz-range-picker [nzDisabledDate]disabledDate [nzDisabledTime]disabledRangeTime [nzShowTime]{ nzHideDisabledOptions: true, nzDefaultOpenValue: timeDefaultValue } nzFormatyyyy-MM-dd HH:mm:ss /4.3 与 nzShowTime 的协作nzDisabledTime依赖时间列的展开因此必须与nzShowTime配合才有意义。API 文档说明nzShowTime中当前支持的时间选择器参数包括nzFormat、nzHourStep、nzMinuteStep、nzSecondStep、nzDisabledHours、nzDisabledMinutes、nzDisabledSeconds、nzHideDisabledOptions、nzDefaultOpenValue、nzAddOn见 date-picker.zh-CN.md。这些选项的类型定义见 SupportTimeOptionsexport interface SupportTimeOptions { nzFormat?: string; nzHourStep?: number; nzMinuteStep?: number; nzSecondStep?: number; nzDisabledHours?(): number[]; nzDisabledMinutes?(hour: number): number[]; nzDisabledSeconds?(hour: number, minute: number): number[]; nzHideDisabledOptions?: boolean; nzDefaultOpenValue?: Date; nzAddOn?: TemplateRefvoid; nzUse12Hours?: boolean; }两条路径可以达成“禁用时间选项”静态禁用把nzDisabledHours/nzDisabledMinutes/nzDisabledSeconds直接写在nzShowTime对象里规则对所有日期相同动态禁用通过nzDisabledTime输入函数按当前日期及范围选择器的start/end侧动态返回禁用集合规则可随所选日期变化灵活度更高示例采用的即此方式。nzHideDisabledOptions: true会让被禁用的选项从列表中直接消失如示例中范围选择器的做法保持默认则禁用项仍可见但呈灰色不可点可按业务需要选择。五、选型建议与适用边界场景推荐能力说明表单草稿态 / 只读展示完全禁止操作nzDisabled输入框与面板全部不可交互清除按钮同步隐藏只能选“今天及以后”等业务日期规则nzDisabledDate面板可浏览禁用格不可选且覆盖日期 / 月 / 季 / 年面板限定可预约时段如营业时间内可选nzShowTimenzDisabledTime可按hour → minute → second级联禁用范围选择器可对起始 / 结束分别配置表单提交期间整体锁定表单[disabled]通过ControlValueAccessor.setDisabledState生效与显式nzDisabled可叠加显式声明优先适用前提与限制以当前仓库为准所有输入输出值均为原生Date范围选择器为Date[]日期运算可借助 date-fns 等工具库官方示例即使用differenceInCalendarDays、setHours见 disabled-date.ts禁用规则函数会在面板渲染中被反复调用应保持无副作用nzDisabledTime仅在配置了nzShowTime的形态下有意义部分 locale 依赖 Angular 自身的国际化支持需在应用入口注册对应语言包如registerLocaleData(zh)详见 DatePicker API 文档 与 日期适配器文档。六、延伸阅读官方示例禁用示例说明、禁用示例代码、日期/时间禁用示例说明、日期/时间禁用示例代码组件实现NzDatePickerComponent、类型定义 standard-types.ts、日期表格、月份表格API 文档DatePicker API中文相关示例基础用法、范围选择器、状态样式赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd 日期选择器禁用机制nzDisabledDate 与 nzDisabledTime 完全指南ng zorro antd 日期选择器禁用机制nzDisabledDate 与 nzDisabledTime 完全指南 在 ng zorro antd 的日期UI组件前端世界地图数据可视化5分钟掌握GeoJSON地理数据应用世界地图数据可视化5分钟掌握GeoJSON地理数据应用 你是否曾经想要创建交互式世界地图却因为复杂的地理数据而望而却步 world.geo.json 项目UI组件前端ng-zorro-antd组件状态持久化localStorage应用ng zorro antd组件状态持久化localStorage应用 为什么需要状态持久化 在Web应用开发中用户可能希望页面刷新或重新打开后保留之前的设置UI组件前端上一篇CMake项目模板终极选择指南7个步骤找到最适合你的启动方案下一篇DevToysMac本地化资源管理多语言文件的组织与维护创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
