Question

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

例如：我想约会1980年1月21日。当我从日期选择器中选取时，它的格式正确（1980年1月21日）。

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

                    }
                />

以mm / dd / yyyy格式插入日期的自动斜杠作为“ react-datepicker”

2 个答案: