ng-zorro组件库日期组件禁止手动输入日期

最新推荐文章于 2023-12-14 17:16:03 发布

原创最新推荐文章于 2023-12-14 17:16:03 发布 · 759 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular #web前端 #javascript

Angular 专栏收录该内容

1 篇文章

订阅专栏

本文解决ng-zorro日期控件在区间选择时的手动输入问题，通过隐藏输入框避免时间输入错误，确保时间排序正确，采用jQuery库实现nzOpenChange事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用ng-zorro组件库中的日期控件时，遇到区间输入日期时间的一系列bug;例如在手动后输入日期时间时起始日期晚于开始日期时不会触发 modelchange事件；点击查询时查不到数据

在这里插入图片描述

如上图 在选择日期后  使用手动输入的开始时间晚于终止时间时不会触发change事件  所以无法进行时间排序；所以现在的一个需求思路就是禁止手动输入时间；具体思路步骤如下：
思路： 使用时间控件的nzOpenChange事件，在日期面板打开时操作dom将输入框隐藏掉 ；做一个假象，就不可以手动输入了！
步骤：
1.使用jq库；引入jq   安装命令：npn install jquery
2.使用日期组件的nzOpenChange事件，在日期面板打开时nzOpenChange操作dom将输入框隐藏掉即可