Вставить автоматическую косую черту для даты в формате мм / дд / гггг для «реагировать на выбор даты» - PullRequest
Новая
       6

Вставить автоматическую косую черту для даты в формате мм / дд / гггг для «реагировать на выбор даты»

1 голос
/ 20 июня 2019

Я использую реагирующее средство выбора даты в моем проекте. Требуемый формат: мм / дд / гггг. То, что я хочу, если я хочу ввести дату, должно быть в формате даты.

Например: Я хочу дату 21 января 1980 года. Когда я выбираю из средства выбора даты, он находится в правильном формате (21.01.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>

Как решить эту проблему?

Ответы [ 2 ]

1 голос
/ 20 июня 2019

В этом случае нам нужно немного настроить этот тег, используя 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}
/>

смени формат по своему желанию. Всего наилучшего.

0 голосов
/ 20 июня 2019

Я решил проблему. Это мой код 

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

                    }
                />
...