format DD/MM/YYYY input react as user types

Question

I have an input box in a React component. This is to take a date of birth. I want to add / after each relevant section. i.e. 30/03/2017

Something similar to this but for date of birth as opposed to credit card number.

The user should enter 30 and then it should automatically add the /. This works with my current code, however, it enters a slash after each 2 digits, however, for the year it adds the slash also after each second digit.

See complete React component below

class DateInput extends Component {

  constructor(props) {

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: ''
    }

  }

  handleChange(val) {

    val = val.split('/').join('');
    val = val.match(new RegExp('.{1,2}', 'g')).join("/");

    this.setState({
        value: val
    });

  }


  render() {

    const {value} = this.state;
    const placeholder = 'DAY/MONTH/YEAR';

    return ( <input type = "text" value={value} placeholder={placeholder}
      onChange = {this.handleChange}/>
    );

  }

}

updated code, but that should be everything needed for the question — , Mar 30 '17 at 14:07
@funcoding i dont want to add another library tbh. Thanks though, I appreciate your help — , Mar 30 '17 at 14:40

score 3 · Answer 1 · answered Mar 30 '17 at 14:22

You can set up an onKeyDown event on the input and detect for press of backspace. Similarly you can do it for delete too. I have demonstrated in the snippet below for backspace.

class DateInput extends React.Component {

  constructor(props) {
    super();
    this.handleChange = this.handleChange.bind(this);
     this.keyPressFunc = this.keyPressFunc.bind(this) 
    this.state = {
      value: ''
    }

  }
  keyPressFunc(e) {
   
    if(e.which === 8) {
      var val = this.state.value;
      console.log(val);
      if(val.length == 3 || val.length == 6) {
          val = val.slice(0, val.length-1);
          console.log(val)
          this.setState({value: val})
      }
    }
  }

  handleChange(e) {
    var val = e.target.value;
      console.log('called', val)
      if (val.length === 2) {

        val += '/';

      } else if (val.length === 5) {

        val += '/';

      }

      this.setState({
        value: val
      });

    
    
  }


  render() {

    const {value} = this.state;
    const placeholder = 'DAY / MONTH / YEAR';

    return ( <input type = "text" value={value} placeholder={placeholder}
      onChange = {this.handleChange} onKeyDown={this.keyPressFunc}/>
    );

  }

}
ReactDOM.render(<DateInput/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

thanks @shubham! I also had another solution using a regex which i feel is tidier. Is there anyway you would be able to demonstrate how I could do this with the regex instead? — , Mar 30 '17 at 14:26

score 0 · Answer 2 · answered Mar 30 '17 at 14:24

Your Issue: The issue in your code is in the handleChange function. When you try to delete the '/' the function gets called (because its bound to onChange) and adds a new '/' again.

Date inputs in general: Date-inputs can be very tricky as the formatting differs from country to country. Not only the seperator but also the order of day, month and year is different.

As I don't know what your Application is doing in the end I can't really give a straight answer here. If your Page/Application will be used not only in the US but around the world I would very much recommend to use one of the many plugins out there to take care of your formatting issue.

For Example: https://github.com/RobinHerbots/Inputmask Demo here: http://robinherbots.github.io/Inputmask/

Hope this helps. Good luck and don't get to frustrated over date inputs (I've been there ;))

score 0 · Answer 3 · answered Mar 30 '17 at 14:37

You could use the MaskInput: MaskedInput

var CustomInput = React.createClass({
  render() {
    return <MaskedInput
      mask="11-11-1111"
      placeholder="MM-DD-YYYY"
      size="11"
      {...this.props}
      formatCharacters={{
        'W': {
          validate(char) { return /\w/.test(char ) },
          transform(char) { return char.toUpperCase() }
        }
      }
    }/>
  }
})

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="form-field">
        <label htmlFor="card">Card Number:</label>
        <CustomInput />
      </div>
    );
  }
}
ReactDOM.render(
  <ShoppingList />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/react-maskedinput@3.3.4/umd/react-maskedinput.js"></script>
<div id="root"></div>

format DD/MM/YYYY input react as user types

3 Answers3

Linked