Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A react.js date field with masked input
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" />
}
/>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.