reactjs - 将输入掩码添加到 React DatePicker

Question

我有一个谷歌，似乎无法找到我要找的东西。

我需要一个 React Datepicker，它允许使用输入掩码，并且当您按数字覆盖它时，输入掩码保持原位，即。日/月/年或 //____ 变为 01/0M/yyyy 或 01/0_/____。理想情况下，第一个选项指定哪个项目进入哪个字段。

我尝试了几个不同的组件但失败了。

我目前使用的组件是 react-datepicker然而，这似乎无法做到。任何建议或解决方法将不胜感激。

Answer 1

我们在使用 react-datepicker 库时遇到了类似的问题，对于屏蔽输入，您可以使用 customInput属性如 react-datepicker documenentation 中所述.作为 datepicker 的屏蔽输入，我们使用了一个由 react-text-mask 创建的输入图书馆。所以我们得到了这样的代码:

import React from "react";
import Calendar from "react-datepicker";
import MaskedTextInput from "react-text-mask";

const DatePicker = props => (
   <Calendar
     customInput={
       <MaskedTextInput
         type="text"
         mask={[/\d/, /\d/, ".", /\d/, /\d/, ".", /\d/, /\d/, /\d/, /\d/]}
       />
     }
   />
);

这会导致带有强制掩码的自定义输入的日期选择器 __.__.___ , 替换 /\d/使用精确值(如上面示例中的点)，您将获得一个预填充的蒙版。为了使日期选择器与用户正确交互，我们还添加了 onChange使用日期验证屏蔽输入的处理程序。