antd 日期组件(DatePicker.RangePicker)使用

举例子：

我们在后台发布一个商品 秒杀时间分 开始、结束

需求：开始时间不能选择现在时间的之前精确到分   比如（现在是 2019-09-28 16:01:00    2019-09-28 16:00:00之前日期是不能选择的 ）

 

 

 

 

 

 

1.要看(还要安装 yarn add moment)moment.js(http://momentjs.cn/docs/)  因为 DatePicker是基于它来实现的 具体主要看如何取时间

console.log(moment().get('year')); // 年
console.log(moment().get('month')+1);  // 月 从 0 to 11 所以需要自己加1
console.log(moment().get('date')); // 日
console.log(moment().get('hour')); // 时
console.log(moment().get('minute')); // 分
console.log(moment().get('second')); // 秒
console.log(moment().get('millisecond')); // 毫秒
console.log(moment().subtract(1, "days")); // 前一天全部的日期
....

2.要看DatePicker 组件的文档(https://ant.design/components/date-picker-cn/) 看完或者看案例会发现它有两个方法（disabledDate禁止日期(年、月、日)、disabledTime禁止时间(时分秒)）

import { DatePicker } from 'antd';

const { RangePicker } = DatePicker;

import moment from 'moment'; // 自行下载 yarn add moment

class AdvancedForm extends  Component{  
    range = (start, end) => {
        const result = [];
    for (let i = start; i < end; i++) {
      result.push(i);
    }
    return result;
  };
  disabledDate = (current) => {
    if(!current){
      return false
    }else{
      // 前一天后日期不可选
      return current < moment().subtract(1, "days")
    }
  };
  disabledRangeTime = (dates, type) => {
    if (type === 'start') { // 开始日期
      if (dates && dates.length >= 1) {
        console.log(dates[0].get('hour'));
        console.log(moment().get('hour'));
        // 判断选择时间=当前时间，=就截取分
        if (dates[0].get('hour') === moment().get('hour')) {
          return {
            // 传过去的数据是不显示的
            disabledHours: () => this.range(1, moment().get('hour')),
            disabledMinutes: () => this.range(0, moment().get('minute')),
            disabledSeconds: () => this.range(0, moment().get('second'))
          };
        }
      }
      return {
        // 传过去的数据是不显示的
        disabledHours: () => this.range(1, moment().get('hour'))
      };
    } else { // 结束日期
    }
  };
  render() {
     return (
       <RangePicker
          disabledDate={this.disabledDate}
          disabledTime={this.disabledRangeTime}
          onChange={this.handleShopCreateChange}
          onOk={this.handleShopCreateOk}
          showTime={{
             hideDisabledOptions: true,
             defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59',          'HH:mm:ss')],
           }}
           format="YYYY-MM-DD HH:mm:ss"
       />
     )
  }
}