Created
November 1, 2018 23:04
-
-
Save johnnyfekete/11ef0cd8840606d065fd514912ae7b74 to your computer and use it in GitHub Desktop.
A react.js date field with masked input
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
HI i need masked input only for time in 12 hour format with AM and PM.
i tried mask with [' ',
/\d/,
/\d/,
${timeDelim}
,/\d/,
/\d/,
' ',
/[AaPp]/i,
/[Mm]/i,]
but i could get the proper mask for time.
any suggestion please .