Breaking News: Grepper is joining You.com. Read the official announcement!

react datepicker input masking

Embarrassed Echidna answered on November 9, 2022 Popularity 6/10 Helpfulness 2/10

answer react datepicker input masking

react datepicker input masking

Comment

import React, { Component } from 'react';
import DatePicker from 'react-datepicker';
import MaskedInput from 'react-maskedinput'; //Magic happens with this component and a customInput prop for DatePicker
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" />
        }
      />
    );
  }
}

Popularity 6/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: javascript react-datepicker

Link to this answer
Share Copy Link