为 "react-datepicker" 的 mm/dd/yyyy 格式的日期插入自动斜杠

Question

我在我的项目中使用了 react-datepicker。所需格式为 mm/dd/yyyy。我想要的是，如果我想输入日期，应该是日期格式。

例如：我想要 1980 年 1 月 21 日这个日期。当我从日期选择器中选择时，它的格式是正确的 (01/21/1980)。

现在，如果我输入相同的日期，它不会自动在两者之间插入斜线，而是显示日期，如 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>

如何解决这个问题？

Answer 1

在那种情况下，我们需要使用 customInput 自定义此标签，例如 -

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

注意 - 用您的标签更改标签，您可以使用 https://github.com/text-mask/text-mask/tree/master/react/#readme 库来屏蔽您的输入，例如 -

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

根据需要更改格式祝一切顺利。

Answer 2

我解决了这个问题。这是我的代码

    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}
                        />

                    }
                />

为 "react-datepicker" 的 mm/dd/yyyy 格式的日期插入自动斜杠

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

reactjs

react-datepicker