将输入掩码添加到React DatePicker

Question

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

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

我尝试了一些不同的组件，但是失败了。

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

Answer 1

在使用react-datepicker库时，我们遇到了类似的问题，对于掩码输入，您可以使用react-datepicker documenentation中customInput描述的属性。作为日期选择器的屏蔽输入，我们使用了用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/确切的值替换（如上面示例中的点），您将获得预填充的掩码。为了使datepicker与用户正确交互，我们还onChange使用日期验证将处理程序添加到了带掩码的输入中。