Insert auto-slash for date in mm/dd/yyyy format for "react-datepicker"

Question

I am using react-datepicker in my project. The required format is mm/dd/yyyy. What I want is ,if I want to type a date it,should be in date format.

Eg: I want the date 21st Jan 1980. When I pick from the datepicker it is in the correct format(01/21/1980).

Now if I type the same date it's not auto inserting slash in between ,but showing the date like 01211980.

<div className="dashboard-patients-details_row_value">
   <Field name="DateRec" component={Datepicker} disabled={isEditing?false:true}/>
</div>

<div className="datepicker">
   <DatePicker
      selected={value ? moment(value) : null}
      onChange={onChange}
      disabled={disabled}
    />
  <div className="calendar-block">
    <CalendarIcon onClick={this.datepicker}
  />
 </div>
</div>

How to solve this issue?

dream001 · Accepted Answer · 2019-06-20T09:52:36.373

I solved the issue. This is my code

    import MaskedInput from 'react-text-mask'
import createAutoCorrectedDatePipe from 'text-mask-addons/dist/createAutoCorrectedDatePipe'

const autoCorrectedDatePipe = createAutoCorrectedDatePipe('mm/dd/yyyy HH:MM')
<DatePicker
                    selected={value ? moment(value) : null}
                    onChange={onChange}
                    disabled={disabled}
                    customInput={
                        <MaskedInput
                            pipe={autoCorrectedDatePipe}
                            mask={[/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/]}
                            keepCharPositions= {true}
                            guide = {true}
                        />

                    }
                />

For more clarification, 'text-mask-addons' and 'react-text-mask' must be installed. — Amirhossein Rahmati, Dec 30 '21 at 08:55

score 3 · Answer 2 · answered Jun 20 '19 at 05:21

In that case, we need to customize this tag little bit using customInput for example-

<DatePicker
  customInput={<ExampleCustomInput />}
  selected={value ? moment(value) : null}
  disabled={disabled}
   onChange={onChange}
/>

Note - change tag with your tag you can use https://github.com/text-mask/text-mask/tree/master/react/#readme library to mask your input, something Like -

<DatePicker
  customInput={<MaskedInput
  mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
/>}
  selected={value ? moment(value) : null}
  disabled={disabled}
   onChange={onChange}
/>

change the format as you want All the best.

Insert auto-slash for date in mm/dd/yyyy format for "react-datepicker"

2 Answers2