禁用的日期

  1. 结束时间需要大于开始时间
  2. 结束日期，大于今天的日期全部禁用
  3. 结束日期和开始日期，之间不能超过 7个自然日
    1. onCalendarChange 和 disabledDate 来限制动态的日期区间

image.png

  1. import { useState, useEffect } from 'react';
  2. import { number, array, func, string } from 'prop-types';
  3. import { DatePicker } from 'antd';
  4. import dayjs from 'dayjs';
  5. import { noop, isArray, isString } from 'lodash-es';
  7. import type { Dayjs } from 'dayjs';
  8. import type { TimeRangePickerProps } from 'antd';
  10. const { RangePicker: AntdRangePicker } = DatePicker;
  12. type RangeValue = [Dayjs | null, Dayjs | null] | null;
  14. // dayjs().add(-1, 'w') 一周 = 7天
  15. const rangePresets: TimeRangePickerProps['presets'] = [
  16.   { label: '今天', value: [dayjs().startOf('d'), dayjs()] },
  17.   { label: '昨天', value: [dayjs().add(-1, 'd'), dayjs()] },
  18.   { label: '最近 15 分钟', value: [dayjs().add(-15, 'm'), dayjs()] },
  19.   { label: '最近 30 分钟', value: [dayjs().add(-30, 'm'), dayjs()] },
  20.   { label: '最近 1 小时', value: [dayjs().add(-1, 'h'), dayjs()] },
  21.   { label: '最近 6 小时', value: [dayjs().add(-6, 'h'), dayjs()] },
  22.   { label: '最近 24 小时', value: [dayjs().add(-24, 'h'), dayjs()] },
  23.   { label: '最近 5 天', value: [dayjs().add(-5, 'd'), dayjs()] },
  24. ];
  26. RangePicker.propTypes = {
  27.   value: array,
  28.   onChange: func,
  29.   maxDays: number,
  30.   format: string,
  31. };
  32. RangePicker.defaultProps = {
  33.   onChange: noop,
  34.   maxDays: 7,
  35.   format: 'YYYY/MM/DD HH:mm',
  36. }
  38. function RangePicker(props: any) {
  39.   const {
  40.     value,
  41.     onChange,
  42.     maxDays,
  43.     ...rest
  44.   } = props;
  46.   const [dates, setDates] = useState<RangeValue>(null);
  48.   useEffect(() => {
  49.     const _dates = isArray(value)
  50.       ? value.map(it => isString(it) ? dayjs(it) : it)
  51.       : value ?? null;
  52.     setDates(_dates);
  53.   }, [value]);
  55.   // 动态的日期区间选择，不超过 7 天
  56.   const disabledDate = (current: Dayjs) => {
  57.     if (!dates) {
  58.       return false;
  59.     }
  60.     const tooLate = dates[0] && current.diff(dates[0], 'days') >= maxDays;
  61.     const tooEarly = dates[1] && dates[1].diff(current, 'days') >= maxDays;
  62.     return !!tooEarly || !!tooLate;
  63.   };
  65.   /**
  66.    * 先触发 onCalendarChange，然后触发 onChange
  67.    * 选完第一个时间，点击面板的确定按钮时，只触发 onCalendarChange，不触发 onChange
  68.    * 选择第二个时间，点击面板确定时，先触发 onCalendarChange，然后触发 onChange
  69.    * @param dates
  70.    * @param dateStrings
  71.    */
  72.   // const onCalendarChange = (dates: RangeValue, dateStrings: string[]) => {
  73.   //   setDates(dates);
  74.   //   console.log('onCalendarChange', { dates, dateStrings})
  75.   // }
  77.   /**
  78.    * 清空时 { dates: null, dateStrings: ['', ''] }
  79.    * @param dates
  80.    * @param dateStrings
  81.    */
  82.   const onRangeChange = (dates: RangeValue, dateStrings: string[]) => {
  83.     setDates(dates);
  85.     if (dates) {
  86.       onChange(dates, dateStrings);
  87.       console.log('onRangeChange', { dates, dateStrings });
  88.     } else {
  89.       onChange(dates, []);
  90.       console.log('Clear', { dates, dateStrings });
  91.     }
  92.   };
  94.   return (
  95.     <AntdRangePicker
  96.       presets={rangePresets}
  97.       changeOnBlur
  98.       showTime
  99.       // showTime={{ format: 'HH:mm:ss', minuteStep: 15 }}
  100.       disabledDate={disabledDate}
  101.       onCalendarChange={setDates}
  102.       {...rest}
  103.       value={dates}
  104.       onChange={onRangeChange}
  105.     />
  106.   )
  107. }
  109. export default RangePicker;
  112. // 大于今天的日期禁用
  113. export function disabledAfterDate(current: any) {
  114.   return current > Date.now()
  115. }

presets 预设日期

antd5x版本为 presets={[]}，数组格式
antd4x版本为 ranges={{}}，对象格式
image.png

presets

presets 数组格式
https://ant-design.antgroup.com/components/date-picker-cn#components-date-picker-demo-preset-ranges

  1. import dayjs from 'dayjs';
  2. import type { TimeRangePickerProps } from 'antd';
  4. export const rangePresets: TimeRangePickerProps['presets'] = [
  5.   { label: '最近 1 小时', value: [dayjs().add(-1, 'h'), dayjs()] },
  6.   { label: '最近 6 小时', value: [dayjs().add(-6, 'h'), dayjs()] },
  7.   { label: '最近 24 小时', value: [dayjs().add(-24, 'h'), dayjs()] },
  8.   { label: '最近 5 天', value: [dayjs().add(-5, 'd'), dayjs()] },
  9. ]

ranges

ranges 对象格式
https://4x-ant-design.antgroup.com/components/date-picker-cn/#components-date-picker-demo-presetted-ranges

  1. export function rangeDates() {
  2.   const now = moment();
  3.   return {
  4.     '今天': [moment().startOf('d'), now],
  5.     '昨天':[
  6.       moment().subtract(1, 'days').startOf('day'),
  7.       moment().subtract(1, 'days').endOf('day'),
  8.     ],
  9.     '最近15分钟': [moment().subtract(15, 'minutes'),now],
  10.     '最近30分钟': [moment().subtract(30, 'minutes'), now],
  11.     '最近1小时': [moment().subtract(1, 'hours'), now],
  12.     '最近1天': [moment().subtract(1, 'day'), now],
  13.     '最近1周': [moment().subtract(1, 'weeks'), now],
  14.     '最近1月': [moment().subtract(1, 'months'), now],
  15.     '本月': [moment().startOf('month'), moment().endOf('month')],
  16.     '本季': [moment().startOf('quarter'), now],
  17.     '本年': [moment().startOf('year'), now],
  18.   };
  19. }