如何使用react-datetime获取选定的日期？

Question

我正在使用开箱即用的react-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))
  };

它适用于我常规的ol‘react-bootstrap组件：<FormControl type="date" onChange={this.props.handleDate} />，但当我使用DateTime时，它显示它的值未定义。"Schedule.js:135 Uncaught TypeError: Cannot read property 'value' of undefined“

我正在查看来自npm site的API，但没有看到任何显示如何获取数据的示例。我可能读得太多了。

如何使用DateTime获取选定日期的值?在这种情况下，e.target.value似乎不起作用。

Answer 1

来自docs:日期更改时的回调触发器。如果输入中的日期有效，则回调将所选的moment对象作为唯一参数接收。如果输入中的日期无效，则回调将接收输入的值(字符串)。

使用此信息，处理程序应如下所示：

handleDate(date){
   this.setState({date}); # ES6 
};

Answer 2

补充一下Oluwafemi Sule的答案，要从moment对象中获取date对象，需要使用.toDate()，而不是像moment一样使用_d等任何内部属性。

Moment使用一种称为纪元移位的技术，该技术会导致此属性有时与Moment反映的实际日期值不同。特别是，如果正在使用Moment TimeZone，则此属性几乎永远不会与该Moment将从其公共.format()函数输出的实际值相同。因此，不应将_d的值和任何其他以_为前缀的属性用于任何目的。

要打印出某个时刻的值，请使用.format()、.toString()或.toISOString()。

要从Moment检索原生Date对象，请使用.toDate()。此函数返回与第三方API交互的正确转移日期。

Moment.js Guide

Answer 3

虽然已经很晚了，但它会帮助到一些人。

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>

     )
  }


}