将输入掩码添加到 React DatePicker

Question

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

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

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

我目前使用的组件是反应日期选择器，但这似乎无法做到这一点。任何建议或解决方法将不胜感激。

Answer 1

我们在使用 react-datepicker库时遇到了类似的问题，对于屏蔽输入，您可以使用 react-datepicker 文档中描述customInput属性。作为日期选择器的屏蔽输入，我们使用了使用反应文本掩码库创建的输入。所以我们得到了这样的代码作为结果：

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处理程序添加到具有日期验证的屏蔽输入中。

Answer 2

import React, { Component } from 'react';
import DatePicker from 'react-datepicker';
import MaskedInput from 'react-maskedinput';
import moment from 'moment';
export default class DateField extends Component {
constructor(props) {
super(props);
this.state = { value: '' }
}
updateDate(value) {
let fieldValue = moment(value).isValid() ?
moment(value).format('MM/DD/YYYY') :
value;
this.setState({ value: fieldValue })
}
render() {
const { value } = this.state;
return (
<DatePicker
value={value}
onChange={value => this.updateDate(value)}          
type="text"
dateFormat="MM/DD/YYYY"
customInput={
<MaskedInput mask="11/11/1111" placeholder="mm/dd/yyyy" />
}
/>
);
}
}