Как получить выбранную дату, используя response-datetime?

Я использую ответную дату из коробки.

Сейчас я пытаюсь сохранить выбранную дату для сохранения в моем date государство.

import DateTime from 'react-datetime';
import '../DateTime.css';

class SomeClass extends React.Component {
  render(){
    return (
      <div>
        <DateTime onChange={this.props.handleDate}/>
      ...

Программа выше работает - она ​​отображает простое поле, в котором отображается календарь, когда кто-то нажимает на него.

Вот handleDate метод:

  ...
  handleDate(e){
    this.setState({date: e.target.value}, () => console.log(this.state.date))
  };

Он работает на моем обычном компоненте "Пожарная загрузка": <FormControl type="date" onChange={this.props.handleDate} /> но когда я использую DateTime, он говорит, что его значение не определено. "Schedule.js:135 Uncaught TypeError: Cannot read property 'value' of undefined"

Я смотрю на API с сайта npm, но не вижу ни одного примера, показывающего, как получить данные. Я мог бы переоценить это.

Как я могу получить значение выбранных дат, используя DateTime? e.target.value не похоже на работу по этому делу.

Источник

2 ответа

Решение

Из документов: Обратный вызов срабатывает при изменении даты. Обратный вызов получает выбранный моментный объект как единственный параметр, если дата на входе действительна. Если дата во входных данных недопустима, обратный вызов получает значение входных данных (строку).

Используя эту информацию, обработчик должен выглядеть так:

handleDate(date){
   this.setState({date}); # ES6 
};
Источник

Уже поздно, но это кому-то поможет.

import Datetime from 'react-datetime';

 class User extends React.Component {

    constructor(props) {
        super(props);
        this.state = {  
              date: "",
              time: "",
        }
     }
changeDate = (event) => {
     console.log(event.toDate()) // Tue Nov 24 2020 00:00:00 GMT+0400 (Gulf Standard Time)
     console.log(event.format("DD-MM-YYYY")) //24-11-2020
     this.setState({...this.state, date: event.format("DD-MM-YYYY")}) 
}

changeTime = (event) => {
    console.log(event.format("HH-mm-ss a")) //02-00-00 am
    this.setState({...this.state, time: event.format("HH-mm-ss a")})
}

  render() {
    return (
            <div>
              <Datetime
                     id="datepicker"
                           viewMode="days"
                           timeFormat={false}
                            dateFormat="DD-MM-YY"
                            value={this.state.date}
                           onChange={this.changeDate}

                    />


                <Datetime
                     id="timepicker"
                     viewMode="time"
                     dateFormat={false}
                     onChange={this.changeTime}
                     />
            </div>

     )
  }


}
Источник

В дополнение к ответу Oluwafemi Sule, чтобы получить объект даты из объекта момента, вам нужно использовать.toDate() и не использовать какие-либо внутренние свойства, такие как _d на данный момент.

Момент использует технику, называемую сменой эпох, которая иногда приводит к тому, что это свойство отличается от фактического значения даты, которое отражает Момент. В частности, если используется Moment TimeZone, это свойство почти никогда не будет таким же, как фактическое значение, которое Moment будет выводить из своей публичной функции.format(). Таким образом, значения _d и любые другие свойства с префиксом _ не должны использоваться ни для каких целей.

Чтобы распечатать значение момента, используйте.format(), .toString() или.toISOString().

Чтобы извлечь собственный объект Date из Moment, используйте.toDate(). Эта функция возвращает правильно смещенную дату для взаимодействия со сторонними API.

Руководство по Moment.js

Источник
Другие вопросы по тегам