7

我正在使用开箱即用的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 站点的 API，但没有看到任何显示如何获取数据的示例。我可能读多了。

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

4

3 回答 3

7

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

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

handleDate(date){
   this.setState({date}); # ES6 
};
于 2017-05-18T17:49:52.877 回答
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>

     )
  }


}
于 2020-11-23T06:28:12.713 回答
3

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

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

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

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

Moment.js 指南

于 2018-09-19T06:28:07.223 回答