时间戳

首页 > 解决方案 > 如何自定义键盘输入和格式？

reactjs - 如何自定义键盘输入和格式？

问题描述

我已经从 升级material-ui-pickers 2.x到@material-ui/pickers 3.x（都带有@date-io/moment）。现在我正在为键盘输入和格式而苦苦挣扎。

2.x与我使用的版本format="D.M.YYYY"。用户可以输入例如1.1.2000or04.08.2000或12.12.2000。

但是对于版本3.x，输入仅严格允许1.1.2000. 不可能有 2 位数的日期或月份。虽然我改为format="DD.MM.YYYY"，但现在不可能输入没有前导零的 1 位数的日期或月份。例如，键入1.1.2000结果为11.20.00.

如何实现以下一种（或两种）行为？

  1. 用户可以输入他想要的任何内容，包括字符（与 version 相同的行为2.x）。或者：

  2. 听.输入，然后跳到下一个输入部分。即用户类型1.2.2000，它将设置1为日，然后跳转到月份部分，因为用户按下.键，然后设置2为月份，然后跳转到年份部分，因为用户按下.然后设置2000为年份。

标签： reactjsmaterial-ui

解决方案

refuse我为案例 1 找到了一种使用and的 hacky 解决方案rifmFormatter：

<KeyboardDatePicker
    refuse={/[^\d\.]+/gi}
    rifmFormatter={value => value.replace(/[^\d\.]+/gi, '')}
    format={"D.M.YYYY"}
    ...
/>

这将只允许以任何顺序输入数字和点，并删除输入屏蔽。

不是最佳解决方案，但比以前更好。

推荐阅读