javascript - react 日期选择器因时刻和新日期而失败

标签 javascript reactjs datepicker momentjs

我正在尝试在 react-datepicker 中设置 minDate 属性具有 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}
     />

或使用新日期:

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”。 结果仍然是当天,并且控制台中没有错误,感谢您的帮助。

最佳答案

我认为您必须为此赋予值(value),因为 minDate 和 maxDate 用于验证目的。 仅当给定值或当前日期小于 min Date 时,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}
   />;
  }
}

关于javascript - react 日期选择器因时刻和新日期而失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52464416/

相关文章:

javascript - Angular JS 自定义指令不起作用

php - WooCommerce 结账的时间循环从日期选择器输入字段中选择选项

javascript - OnClick 找不到我正在调用的子系统

javascript - 如何在canvas html5中渲染Socket数据?

reactjs - 使用react-router-v4对路由进行身份验证

node.js - Fluxible 中的“脱水”和“再水合”代表什么?

javascript - 可滚动 div 上的 jquery DateTimePicker

javascript - jquery不从DIV data-id获取PHP变量值,只输出变量名称

javascript - 为什么在页面刷新后验证函数调用而单击时没有任何反应

reactjs - 错误 : Invariant Violation: findAllInRenderedTree(. ..):实例必须是复合组件