antd-design日期組件DatePicker不可用時間disabledDate設置

DatePicker時間范圍限制,都是對disabledDate這個參數賦值,返回Boolean值,true是不可選,false是可選

disabledDate是一個函數,能拿到current當前鼠標移入的時間,只需要對這個時間進行限制就可以了

antd的DatePicker會引入moment,我們可以使用moment里面的一些時間計算獲取方法進行操作

項目是react寫的,如果不是用react只參考disabledDate函數的設置

單個日期

const disabledDay = current => {
  // 只能選擇當前日期的兩個月范圍內
  return current && (current > moment().endOf('day') || current <  moment().subtract(2, 'months'));

  // 只能選擇當前日期的前后一個月范圍
  // return current && (current >  moment().add(1, 'months') || current <  moment().subtract(1, 'months'));
}

<DatePicker disabledDate={disabledDay} />

日期范圍

const disabledRangeDate = current => {
  if (!dates || dates.length === 0) {
    return current > moment().endOf('day')
  }
  // 只能選擇當前日期之前,日期范圍不超過7天
  const tooLate = dates[0] && current.diff(dates[0], 'days') > 7
  const tooEarly = dates[1] && dates[1].diff(current, 'days') > 7
  return tooEarly || tooLate || current > moment().endOf('day')
};

<RangePicker
  value={hackValue || value}
  disabledDate={disabledRangeDate}
  onCalendarChange={val => setDates(val)}
  onChange={val => setValue(val)}
  onOpenChange={onOpenChange}
/>

 

moment常用方法:

moment().endOf('day')  // 今天的23:59:59.999

moment().endOf('year') / / 今年的 12 月 31 日 23:59:59.999,還可以填month,week,hour等

moment().add(1, 'months')  // 當前月份加一月,如今天2021-05-25,得到就是2021-06-25

moment().add(1, 'year')  // 當前年加一年,如今天2021-05-25,得到就是2022-05-25

moment().subtract(1, 'months')  // 當前月份減一月,如今天2021-05-25,得到就是2021-04-25

moment().subtract(1, 'year')  // 當前年減一年,如今天2021-05-25,得到就是2020-05-25

var a = moment('2021-05-18');

var b = moment('2020-04-16');

a.diff(b, 'years')  // 1,b-a的年份

a.diff(b, 'days')  // 2,b-a的日期

moment().date()  // 25今天的日期

moment().day()  // 2 今天是星期幾

moment().year()  // 2021 今年的年份

moment().year(2022)  // 2022-05-25 設置年份為2022

moment.js官方文檔 http://momentjs.cn/docs/#/manipulating/add/

 

這里補充一點,在form表單中使用RangePicker會有問題,因為form中的value取的不是你設置的value值,是form內部會處理,需要通過form.setFieldsValue進行賦值

這是我項目里的處理

const [dates, setDates] = useState([])
const [year, setYear] = useState([])

const disabledDate = (current: any) => {
  if (!dates || dates.length === 0) {
    return current > moment().endOf('day');
  }
  // 不可選擇超過今年,不超過5年范圍
  const tooLate = dates[0] && current.diff(dates[0], 'years') > 4
  const tooEarly = dates[1] && dates[1].diff(current, 'years') > 4
  return tooEarly || tooLate || current > moment().endOf('day')
}

const onOpenChange = (open: any) => {
    if (open) {
      setHackValue([])
      setDates([])
      form.setFieldsValue({
        dateRange: []
      })
    } else {
      setHackValue(undefined)
      form.setFieldsValue({
        dateRange: year
      })
    }
  }

// setYear有延時,第二次選擇時帶出的是第一次的值,通過useEffect監聽
  useEffect(() => {
    if (year && year.length) {
      form.setFieldsValue({
        dateRange: year
      })
    }
  }, [year])

  <Form.Item
    label="日期范圍"
    name="dateRange"
  >
    <RangePicker 
      style={{width: '98%'}} 
      picker="year" 
      onChange={val => setYear(val)}
      onCalendarChange={val => setDates(val)}
      onOpenChange={onOpenChange}
      disabledDate={disabledDate}
    />
  </Form.Item>

 

完整代碼tsx

import React, { useState } from 'react'
import { DatePicker } from 'antd'
import moment from 'moment'

const { RangePicker } = DatePicker

const DateInfo: React.FC = () => {
  const [dates, setDates] = useState([]);
  const [hackValue, setHackValue] = useState();
  const [value, setValue] = useState([moment('2021-5-18', 'YYYY-MM-DD'), moment(new Date(), 'YYYY-MM-DD')]);
  const [year, setYear] = useState([moment('2016', 'YYYY'), moment(new Date(), 'YYYY')]);

  const disabledDay = current => {
    // 只能選擇當前日期的兩個月范圍內
    return current && (current > moment().endOf('day') || current <  moment().subtract(2, 'months'));

    // 只能選擇當前日期的前后一個月范圍
    // return current && (current >  moment().add(1, 'months') || current <  moment().subtract(1, 'months'));
  }

  const disabledDate = current => {
    // 只能選擇當前月份以后的月份
    // return current && current < moment().endOf('day')

    // 只能選擇今年的月份
    return current && current.year() !== moment().year()
  }

  const disabledRangeDate = current => {
    if (!dates || dates.length === 0) {
      return current > moment().endOf('day')
    }
    // 只能選擇當前日期之前,日期范圍不超過7天
    const tooLate = dates[0] && current.diff(dates[0], 'days') > 7
    const tooEarly = dates[1] && dates[1].diff(current, 'days') > 7
    return tooEarly || tooLate || current > moment().endOf('day')
  };

  const disabledYearRangeDate = current => {
    if (!dates || dates.length === 0) {
      return current > moment().endOf('day')
    }
    // 只能選擇當前年份之前,日期范圍不超過5年
    const tooLate = dates[0] && current.diff(dates[0], 'years') > 4
    const tooEarly = dates[1] && dates[1].diff(current, 'years') > 4
    return tooEarly || tooLate || current > moment().endOf('day')
  };

  const onOpenChange = open => {
    if (open) {
      setHackValue([]);
      setDates([]);
    } else {
      setHackValue(undefined);
    }
  };

  return (
    <div>
      <div style={{paddingTop: '30px'}}>
        日期
        <DatePicker 
          disabledDate={disabledDay}
        />
        月份
        <DatePicker picker="month" disabledDate={disabledDate} />
        日期范圍
        <RangePicker
          value={hackValue || value}
          disabledDate={disabledRangeDate}
          onCalendarChange={val => setDates(val)}
          onChange={val => setValue(val)}
          onOpenChange={onOpenChange}
        />
        日期范圍年
        <RangePicker
          picker="year"
          value={hackValue || year}
          disabledDate={disabledYearRangeDate}
          onCalendarChange={val => setDates(val)}
          onChange={val => setYear(val)}
          onOpenChange={onOpenChange}
        />

      </div>
    </div>
  )
}

export default DateInfo