Question

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

我需要一个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处理程序。

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" />
        }
      />
    );
  }
}

将输入掩码添加到React DatePicker

2 个答案: