React-datepicker: Mask typed input

[felipe-gdr]

Mask user input on keyUp event. Ex.: --/--/----

[ReactGirl]

Any solution for this one?

[js2me]

@ReactGirl I'm not found solution, using that component, but I use air-datepicker for that feature

[alyahmedaly]

any update on this ?

[js2me]

@alyahmedaly I heard so that component have possible to connect with react-inputmask

[alyahmedaly]

yes it's very easy
<DatePicker {...DatePickerProps} customInput={<MaskedInput mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]} } />

[js2me]

I think that issue need to close

[rafeememon]

Agreed, I don't think this is something that we could easily support natively given the flexibility of the date formats.

[vctormb]

@alyahmedaly Where can I find the 'DatePickerProps'? I'm trying to use the 'MaskedInput' lib, but the value doesn't change when I select a new date on the calendar.

[alyahmedaly]

@vctormb not sure what's your issue but any way this my props
const DatePickerProps = { onBlur: input.onBlur, onFocus: input.onFocus, dateFormat: dateFormat, selected: selectedValue, onChange: this.handleChange, className: "form-control", fixedHeight: true, showMonthDropdown: true, showYearDropdown: true, placeholderText: custom.placeholder, disabled: custom.disabled, minDate: custom.min, maxDate: custom.max, customInput: <DatePickerMaskedInput />, customInputRef: 'inputRef' };

[vctormb]

@alyahmedaly When I select a new date on the Calendar it does not change the MaskedInput value. Do you know how to solve it?

[arielff3]

New soluction ?