用Ant Design里的日期选择器实现一个小需求

前言

在一次开发任务中,需要做一个时间选择器的功能,分为开始时间和结束时间两个时间选择器UI。

要求:

• 1.开始时间只能选择今日及今日以后;
• 2.结束时间需要大于开始时间;
• 3.结束日期和开始日期之间不能超过30个自然日。

我首先想到的是用Ant Design里的日期选择器DatePicker,大致看了一下,唯有范围选择器RangePicker 可以满足我的功能需求,但是,我需要把开始时间和结束时间分为两个时间选择器UI,但是这个范围选择器RangePicker是一个UI不能完全满足我的开发需求。

所以,最后,我用两个日期选择器DatePicker,加上了时间逻辑约束,完成了这个需求,话不多说,上代码!

代码块

html

import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
import { DatePicker } from 'antd';

{/* 时间筛选 */}
<div className={css(styles.baseInfoItem)}>
  <span className={css(styles.baseInfoName)}>开始日期：</span>
  <DatePicker
    onChange={()=>{onChangeStart()}}
    placeholder="选择开始日期"
    disabledDate={()=>{disabledStartDate()}}
    locale={locale}
    format={'YYYY-MM-DD'}
    value={startValue}
  />
</div>
<div className={css(styles.baseInfoItem)}>
  <span className={css(styles.baseInfoName)}>结束日期：</span>
  <DatePicker
    onChange={()=>{onChangeEnd()}}
    placeholder="选择结束日期"
    disabledDate={()=>{disabledEndDate()}}
    locale={locale}
    format={'YYYY-MM-DD'}
    value={endValue}
  />
</div>

js

  const [startValue, setstartValue] = React.useState(null)
  const [endValue, setendValue] = React.useState(null)
  
   /**
   * 筛选开始时间的回调函数
   * @param {*} date  moment
   * @param {*} dateString 
   */
  function onChangeStart(date, dateString) {
    setstartValue(date)
  }

  /**
   * 筛选结束时间的回调函数
   * @param {*} date  moment
   * @param {*} dateString 
   */
  function onChangeEnd(date, dateString) {
    setendValue(date)
  }
  
  /**
    * 控制开始日期
    * @param {*} current: momen
   */
  function disabledStartDate(current){
    if (!startValue || !endValue) {
       // 如果没有选择结束日期，开始日期>=今日
       return current && current < moment().subtract(1, "days");
     } else {
       // 选择了结束日期,开始日期<=结束日期
      return current && current < moment().subtract(1, "days") || endValue <= current
     } 
   }
 
   /**
    * 控制结束日期
    * @param {*} current: momen
   */
   function disabledEndDate(current){
     if (!startValue) {
       // 如果没有选择开始日期，则结束日期>=今日
       return current && current < moment().subtract(1, "days");
     } else {
        //如果选择了开始日期，则结束日期和开始日期除了不能超过30个自然日之外，还需要结束日期>=开始日期
        const minus = moment().add(30, "days");
        return current <= startValue || current >= minus
     }
   }