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

【问题标题】：How to get selected date using react-datetime?如何使用 react-datetime 获取选定的日期？
【发布时间】：2017-10-18 16:02:42
【问题描述】：

我正在使用开箱即用的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 似乎不适用于这种情况。

【问题讨论】：

标签： reactjs datetime react-datetime

【解决方案1】：

来自文档：日期更改时的回调触发。如果输入中的日期有效，则回调接收选定的时刻对象作为唯一参数。如果输入中的日期无效，则回调接收输入的值（字符串）。

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

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

【讨论】：

明白了！感谢您指出。上面的代码给了我一个moment 对象，但我做了一点改动，但它不起作用！ this.setState({date: date._d}) 有效。我需要的日期在_d 键内。但是你的回答把我带到了那里，所以谢谢！
你好，如何获取选定的日期时间戳？
哦，我通过调用 date._d.valueOf() 得到了时间戳。谢谢。
@kyl 很有帮助。虽然您可以获得时间戳的其他方式是 date.unix()
有没有办法将这个时刻对象存储在 sessionStorage 中？我正在尝试存储它，但它没有存储整个时刻对象。

【解决方案2】：

添加到 Oluwafemi Sule 的答案中，要从 moment 对象获取日期对象，您需要使用 .toDate() 并且不使用任何内部属性，例如 _d 。

Moment 使用了一种称为 epoch shift 的技术。属性有时与实际日期值不同瞬间反映。特别是在使用 Moment TimeZone 时，这属性几乎永远不会与 Moment 的实际值相同将从其公共 .format() 函数输出。因此， _d 和任何其他以 _ 为前缀的属性不应用于任何目的。

要打印出 Moment 的值，请使用 .format()、.toString() 或 .toISOString().

要从 Moment 检索本机 Date 对象，请使用 .toDate()。这函数返回一个正确移动的日期以与第三个交互派对 API。

Moment.js Guide

【讨论】：

【解决方案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>

     )
  }


}

【讨论】：