Antd+React DatePicker组件。部分日期/时间为可选(附:只能选择当前时间之后的时间点)

项目中用到的,需要限制时间控件的可选范围,以下代码为当前时间(到秒)之后的时间为可选时间。

  range = (start, end) => {
    const result = [];
    for (let i = start; i <= end; i++) {
      result.push(i);
    }
    console.log(result);
    return result;
  };
  disabledDate = (current) => {
    // 不能选今天和今天之前的日期
    return current && current < moment();
  };
  disabledDateTime = () => {
    let hours = moment().hours();//0~23
    let minutes = moment().minutes();//0~59
    //当日只能选择当前时间之后的时间点
    if (this.state.upgradeTime.date() === moment().date()) {
      return {
        disabledHours: () => this.range(0, hours),
        disabledMinutes: () => this.range(0, minutes),
      };
    }
  };
         <DatePicker
            onChange={(upgradeTime) => this.setState({upgradeTime})}
            showTime={{defaultValue: moment(this.state.upgradeTime)}}
            disabledDate={this.disabledDate}
            disabledTime={this.disabledDateTime}
            format="YYYY-MM-DD HH:mm:ss"
            placeholder="选择时间"
          />
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 13,872评论 1 32
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,460评论 4 61
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 11,858评论 0 17
  • 1、窗体 1、常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体。 ...
    Moment__格调阅读 10,068评论 0 11
  • 《裕语言》速成开发手册3.0 官方用户交流:iApp开发交流(1) 239547050iApp开发交流(2) 10...
    叶染柒丶阅读 28,495评论 5 19

友情链接更多精彩内容