如何获取react-datetime日期？及onChange事件获取修改后日期方法

嘿，我来帮你搞定react-datetime的日期获取和onChange事件处理问题～

首先要明确：react-datetime组件交互后返回的是moment.js对象，我们可以借助moment的API把它转换成需要的格式（比如你用的YYYY-MM-DD字符串）。下面结合你的代码示例一步步说明：

1. 初始化组件与获取初始日期 #

你的初始state里存的是字符串格式的日期，直接传给defaultValue是没问题的；如果后续要更灵活处理日期，也可以把state初始化为moment对象：

// 初始化state（两种方式任选）
this.state = {
  // 方式1：字符串格式（和你原本的写法一致）
  date: "2019-01-01",
  // 方式2：moment对象（推荐，后续日期操作更方便）
  // date: moment("2019-01-01")
};

如果要从组件实例里获取当前显示的初始日期，可以给组件加个ref：

<DateTime
  ref={dateRef => this.dateRef = dateRef}
  defaultValue={this.state.date}
  timeFormat={false}
  onChange={this.onChange}
/>

// 后续获取当前日期的方式
const currentMomentDate = this.dateRef.viewDate; // 返回moment对象
const currentDateStr = currentMomentDate.format("YYYY-MM-DD"); // 转成字符串格式

2. 通过onChange事件获取修改后的日期 #

react-datetime的onChange回调会直接传入选中的moment对象，我们可以在回调里把它转换成需要的格式，再更新到state中：

首先定义onChange方法（用箭头函数可以避免手动绑定this）：

onChange = (selectedDate) => {
  // 把moment对象转成你需要的字符串格式
  const formattedDate = selectedDate.format("YYYY-MM-DD");
  // 更新state
  this.setState({ date: formattedDate });
  
  // 如果需要直接使用moment对象，也可以直接存到state里
  // this.setState({ date: selectedDate });
};

然后把这个方法绑定到组件的onChange属性上：

<DateTime
  defaultValue={this.state.date}
  timeFormat={false}
  onChange={this.onChange}
/>

完整代码示例 #

import React, { Component } from "react";
import DateTime from "react-datetime";
import moment from "moment";
// 别忘了引入react-datetime的样式
import "react-datetime/css/react-datetime.css";

class DatePicker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: "2019-01-01"
    };
  }

  onChange = (selectedDate) => {
    const formattedDate = selectedDate.format("YYYY-MM-DD");
    this.setState({ date: formattedDate }, () => {
      // 可选：更新state后可以做一些操作，比如打印当前选中的日期
      console.log("当前选中的日期：", this.state.date);
    });
  };

  // 手动获取组件当前显示的日期
  getCurrentDate = () => {
    const currentMomentDate = this.dateRef.viewDate;
    console.log("当前组件显示的日期（moment对象）：", currentMomentDate);
    console.log("当前组件显示的日期（字符串）：", currentMomentDate.format("YYYY-MM-DD"));
  };

  render() {
    return (
      <div>
        <DateTime
          ref={ref => this.dateRef = ref}
          defaultValue={this.state.date}
          timeFormat={false}
          onChange={this.onChange}
        />
        <button onClick={this.getCurrentDate}>点击获取当前日期</button>
        <p>当前选中的日期：{this.state.date}</p>
      </div>
    );
  }
}

export default DatePicker;

几个小提醒 #

• 确保已经安装依赖：npm install react-datetime moment
• react-datetime返回的都是moment对象，处理时记得用format()方法转成字符串
• 如果需要限制可选日期，可以额外配置isValidDate属性，这属于进阶功能啦～

内容的提问来源于stack exchange，提问作者susu watari