date of birth input mask react

Question

The input mask is being used for a user's date of birth. This works, however, the issue I am having is that a user can enter 54/54/2017 into the input box. I want to prevent this. One way I can do this is by entering a 0 before the first input if less than 10. However, if it is then 12 a 0 is put first.

Does anyone know a way I can solve this issue?

My code is as follows:

import InputMask from 'react-input-mask';

class Date extends Component {

  constructor(props) {
    this.state = {
        date_of_birth: ''   
    };
    this.handleDateOfBirth = this.handleDateOfBirth.bind(this);   

  }

  handleDateOfBirth(e) {

    this.setState({
      date_of_birth: e.target.value
    });

    }


  render() {
    const = {this.state};
    return <InputMask value={date_of_birth} mask="99/99/9999" onChange={this.handleDateOfBirth} />;
  }

}

score 0 · Answer 1 · answered Mar 31 '17 at 14:21

before setting the date value you better try to parse the string in date object like

var valid_date = new Date(e.target.value)

This will return "Invalid Date" response if your date is not valid using this response you can put a if condition and prevent the further operation

Hope this Helps :)

date of birth input mask react

1 Answers1