将输入掩码添加到 React DatePicker

Posted 2023-05-07

【中文标题】将输入掩码添加到 React DatePicker

【英文标题】：Add input mask to React DatePicker

【发布时间】：2019-01-22 06:16:56

【问题描述】：

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

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

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

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

【参考方案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/ 替换为精确值（如上面示例中的点），您将获得一个预填充的掩码。为了让 datepicker 与用户正确交互，我们还添加了 onChange 处理程序以使用日期验证屏蔽输入。

【讨论】：

太棒了，谢谢！！！这对我的需要来说几乎是完美的！！！你知道是否有办法将掩码显示为 dd/MM/yyyy 而不是 __/__/____ 以及是否有一种方法可以在焦点上而不是在输入第一个值时显示掩码？

我相信你可以自定义 react-text-mask 来做到这一点，或者用更合适的屏蔽输入组件替换它（react-maskedinput 做类似的事情）

【参考方案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" />
        
      />
    );