Как получить выбранную дату, используя 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.