如何使用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))
  };

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

我正在查看来自npm网站的API,但没有看到任何显示如何获取数据的示例.我可能会重读它.

如何使用DateTime？获取所选日期的值？e.target.value似乎不适用于这种情况.

Answer 1

从文档:日期更改时的回调触发器.如果输入中的日期有效,则回调会将所选时刻对象作为唯一参数接收.如果输入中的日期无效,则回调将接收输入的值(字符串).

使用此信息,处理程序应如下所示:

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

Answer 2

虽然已经晚了，但它会对某人有所帮助。

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>

     )
  }


}