我需要将DatePicker掩码为MM/dd/yyyy,而我的用户不想手动键入/个字符.他们希望能够只输入数字,并且掩蔽本身就能起作用.

我已经try 了ngx-mask,虽然这对输入很有效,但对DatePicker不起作用.

这是我的stackblitz美元,我已经设置了口罩,但它不能像预期的那样工作

  <nz-date-picker
    mask="'d0/00/0000'"
    [nzFormat]="'dd/MM/yyyy'"
  ></nz-date-picker>

推荐答案

看起来ng-zorro的人们已经收到了类似的请求,他们已经表明了他们的立场clear,他们不会在本地支持掩码,因为Datepicker是一个在内部创建输入的组件,所以不能像常规输入那样添加掩码.

因此,问题中链接的codesandbox中的方法是正确的. 我们需要在自定义输入字段上创建并启用mask.

我注意到的主要问题是,默认情况下,ngx-mask不会捕获掩码的特殊字符,如本例中的/. 因此,日期09/09/2023将被捕获为09092023,这不被ng-zorro日期选取器接受为有效日期.

你可以用ngx-maskdropSpecialCharacters选项来解决这个问题.然而,在我try 的过程中,datemask在一些输入方面出现了问题,看看他们的GitHub,人们多次遇到类似的问题.

因此,我使用了Maskito库,虽然它相对较新,但效果很好,并且与这个用例配合得很好.尽管您可以使用另一个库或创建自定义指令.

这里是一个与Maskito库一起工作的CodeSandbox,为日期输入提供掩码和使用MM/dd/yyyy格式.

Angular相关问答推荐

如何包装NGB carousel ?

按Angular 从组件的 bootstrap 选项卡中删除活动类

懒惰加载角404路径

Angular 17-getEnvironment InjectorProviders出现异常

合并Cypress和Karma的代码覆盖率报告JSON文件不会产生正确的结果

Angular,数据显示在控制台但不在应用程序中

使用 Observable 进行渐进式填充

BehaviorSubject 在 Angular 中制作数据之间的时间表(或计时器)

如何以编程方式关闭 ng-bootstrap 模式?

为什么 HttpParams 在 Angular 4.3 中的多行中不起作用

如何停止在 ngOnInit() 之前调用的 ngOnChanges

如何在 Angular 4 中使用 Material Design 图标?

Electron - 不允许加载本地资源

什么是 Angular 4,我可以从哪里了解更多信息?

Angular 6在输入键上添加输入

为什么用?模板绑定中的运算符?

如何在 Angular cli 项目中包含来自 node_modules 的assets

将 [NgStyle] 与条件组合(if..else)

在渲染视图/模板之前等待 Angular 2 加载/解析模型

Angular2:将数组转换为 Observable