react-datepicker失败并带有瞬间和新日期

时间:2018-09-23 08:34:50

标签: javascript reactjs datepicker momentjs

我正在尝试使用minDatereact-datepicker组件中设置moment属性:

if(this.props.minDate){
      console.log('date:' + moment(this.props.minDate)); //1517436000000

      return <DatePicker

       minDate={ new moment(this.props.minDate)} 
         selected={this.state.startDate}
         onChange={this.handleChange}
         disabled = {this.props.disabled}
     />

或使用new Date

console.log('new date:' + new Date(this.props.minDate)); // Thu Feb 01 2018 02:00:00 GMT+0200
return <DatePicker

       minDate={ new Date(this.props.minDate)} 
         selected={this.state.startDate}
         onChange={this.handleChange}
         disabled = {this.props.disabled}
     />

我的minDate字符串-"2011-10-01"。 仍然是当天的结果,并且在控制台中没有错误,感谢您的帮助。

3 个答案:

答案 0 :(得分:1)

我认为您必须为此提供价值,因为minDate和maxDate用于验证目的。 仅当给定值或当前日期小于最小日期时,minDate才是结果值

class Example extends React.Component {
  constructor (props) {
    super(props)
    this.minDate = new moment(props.minDate)
    this.state = {
      startDate: props.minDate
    };
    this.handleChange = this.handleChange.bind(this);
  }

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

  render() {
    return <DatePicker
     selected={this.state.startDate}
     onChange={this.handleChange}
     minDate={this.minDate}
     value={this.props.startDate}
   />;
  }
}

答案 1 :(得分:0)

在我看来,当您将数据传递给minDate prop时,您不需要瞬间的新实例。您正在这样做minDate={ new moment(this.props.minDate)}

React-datepicker已在内部使用矩来操纵数据对象,因此,我认为您应该在将其传递给minDate道具的那一刻之前删除关键字new。

答案 2 :(得分:0)

我自己想到了这个,看来如果设置了selected属性,它将显示而不是minDate属性。