antd datePicker 限制可选时间

1、需求
时间需要限制在当前时间分钟之前,比如:当前时间是2020年3月31日23:25,那么时间选择器可选的时间是:在2020年3月31日23:25 之前的。

2、思路
因为使用的是 antd 的datePicker 组件,该组件提供了两个方法来做时间限制这件事,一个方法是 disabledDate, 用来限制日期,返回值为 boolean, 另一个方法是 disabledTime 用来限制显示的时间,返回是这样的:

const disabledTime = () => {
  return {
    disabledHours: () => {} // 返回 需要disabled 的hours
    disabledMinutes: () => {} // 返回 需要disabled 的 minutes
  }
}

3、实践

import React from 'react';
import { DatePicker } from 'antd';
import moment from 'moment';
import './index.less';

const { RangePicker } = DatePicker;

const DateRangePicker = ({ onChange }) => {
  const disabledHours = () => {
    const hours = [];
    for (let i = 23; i > moment().hour(); i--) {
      hours.push(i);
    }
    return hours;
  };

  const disabledMinutes = currentDate => {
    const currentMinute = moment().minute();
    const currentHour = moment(currentDate).hour();
    const minutes = [];
    if (currentHour === moment().hour()) {
      for (let i = 59; i > currentMinute; i--) {
        minutes.push(i);
      }
    }
    return minutes;
  };

  const disabledTime = (dateTime) => {
    if (moment(dateTime).isBefore(moment(), 'day')) {
      return {
        disabledHours: () => [],
        disabledMinutes: () => [],
      };
    }

    if (moment(dateTime).isSame(moment(), 'day')) {
      return {
        disabledHours: () => disabledHours(dateTime),
        disabledMinutes: () => disabledMinutes(dateTime),
      };
    }
  };

  return (
    <RangePicker
      format="YYYY/MM/DD HH:mm"
      showTime
      onChange={onChange}
      disabledDate={(selectedDate) => moment(selectedDate).isAfter(moment(), 'day')}
      disabledTime={disabledTime}
      placeholder=""
      className="date-picker"
    />
  );
};

export default DateRangePicker;
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.badgeVaule气泡提示 2.git终端命令方法> pwd查看全部 >cd>ls >之后桌面找到文件夹内容...
    i得深刻方得S阅读 4,723评论 1 9
  • 目录 1 form 表单中 FormItem 的布局 2 form 表单,FormItem 的 rules 中新增...
    林ze宏阅读 21,799评论 2 19
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,265评论 0 4
  • SwiftDate概况 从Swift发布起,我们就没有放弃使用Swift。 当然,我们希望在项目能够轻松自如地管理...
    Mee_Leo阅读 10,182评论 1 13
  • 放了的鸽子,让它飞走。 不想等的班车,只能错过。 没捞完的肉沫,任它漂泊。 不能陪的人,下过雨的路,面熟的花色。 ...
    西兰花小姐阅读 295评论 0 0