修改后的 react-datepicker 不显示值

Question

我正在使用 React v.15。使用默认代码时，使用 react-datepicker 库会出现问题。我已成功修改代码，但每当我点击所选日期时，它根本不显示任何日期。这是我的代码：

import * as React from 'react';
let DatePicker = require('react-datepicker');
import 'react-datepicker/dist/react-datepicker.css';

export default class DtePicker extends React.Component<any, any> {
    constructor() {
        super()
        this.state = {
            startDate: new Date(),
        }
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(date) {
        this.setState({
            startDate: date
        });
    };

    render() {
        return (
            <div>
                <DatePicker
                    dateFormat='yyyy/MM/dd'
                    selected={this.state.startDate}
                    onChange={this.handleChange}
                />
            </div>
        );
    }
}

Am I missing a code perhaps in my handleChange function? Also, it's a typescript file, using ASP.Net framework.

Answer 1

试试这个。它工作正常

import React from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

    class DtePicker extends React.Component {
      constructor() {
        super();
        this.state = {
          startDate: new Date()
        };
        this.handleChange = this.handleChange.bind(this);
      }

      handleChange(date) {
        this.setState({
          startDate: date
        });
      }

      render() {
        return (
          <div>
            <DatePicker
              dateFormat="yyyy/MM/dd"
              selected={this.state.startDate}
              onChange={this.handleChange}
            />
          </div>
        );
      }
    }

查看直播demo

Answer 2

指定版本后我看到 "date.clone is not a function" 错误，所以我怀疑 moment 有问题。

react-datepicker v0.40.0 在后台使用 moment

issue 1120: DatePicker breaks with "date.clone is not a function" when "selected" date is passed down as a prop

选择的日期必须是一个moment对象，所以我们将每个日期对象保存为一个moment日期对象。

class DtePicker extends Component {
  constructor(props) {
    super(props); // Don't forget to pass props to super constructor!
    this.state = {
      startDate: moment(new Date())
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(date) {
    this.setState({
      startDate: moment(date)
    });
  }

  render() {
    return (
      <div>
        <DatePicker
          dateFormat="YYYY/MM/dd" // Also corrected date format
          selected={this.state.startDate}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

时刻v2.24.0
反应 v15.4.1
react-datepicker v0.40.0
react-dom v15.4.1

修改后的 react-datepicker 不显示值

Modified react-datepicker not showing value

reactjs

react-datepicker