response-datepicker дает неправильные значения

Question

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

this.state={
   selectedDate: moment().format(),
}

а также

<DatePicker selected={this.state.selectedDate}/>

Проблема в том, что компонент показывает следующее значение:"52//02/2019/",

Кажется, что компонент считает, сколько дней прошло до текущей даты в году. Я также пытался moment().format('DD/MM/YYYY') без удачи любая помощь будет оценена. Спасибо

Answer 1

Хорошо, я публикую это как ответ, чтобы показать, что сработало для меня. Я считаю, что это слишком большой, чтобы быть комментарием.

Итак, я установил:

this.state={selectedDate:moment().format()}

и в компоненте я использовал:

<DatePicker selected={this.state.selectedDate} 
   dateFormat={moment(this.state.selectedDate).format('DD/MM/YYYY')}/>

Таким образом, я смог изменить выбранную дату и получить текущее значение даты вместо количества дней. Однако я до сих пор не уверен, насколько велико это решение. По крайней мере, у меня пока работает. Надеюсь, что это помогает другим.

Answer 2

Для меня это сработало, когда я использовал момент (). Формат ("ДД ММ ГГГГ") означает, что внутри не было никакого символа "/". Попробуйте код ниже:

    this.state = {
        startDate: moment().format('DD MM YYYY')
    };

Answer 3

Вы должны попытаться отформатировать так (2 эти форматы совпадают друг с другом):

value ={moment(this.state.startDay).format('DD/MM/YYYY')}
format="DD/MM/YYYY"

Answer 4

С версии 2.0.0 React-datepicker отказался от moment.js и начал использовать dateFns.

Что вам нужно сделать, так это удалить moment.js и предоставить собственный объект Date в качестве выбранной опоры и настраиваемую строку форматирования в качестве опоры fomat.

      () => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker
      dateFormat="yyyy/MM/dd"
      selected={startDate}
      onChange={date => setStartDate(date)}
    />
  );
};