Antd DatePicker之旬查詢（本月上旬、本月中旬、本月下旬）

需求

實作旬查詢，本月上旬為1-10号，本月中旬11-20号，本月下旬21-月底

由于Antd 3.x 的RangePicker沒有上月、下月、上年、下年的點選回調，我不能判斷目前是哪年哪月，時間範圍快捷選擇不能動态改變，是以我用監聽DOM節點實作

代碼

.main-container {
  :global {
    /* 禁用月曆日期的點選 */
    .ant-calendar-tbody {
      pointer-events: none;
    }

    // 月選擇器可以選下月，禁用
    .ant-calendar-month-panel-current-cell + .ant-calendar-month-panel-cell {
      pointer-events: none;

      .ant-calendar-month-panel-month {
        color: rgba(0, 0, 0, 0.25);
        background: #f5f5f5;
      }
    }

    /* 隐藏右邊月曆 上月、下月、上年、下年按鈕， 禁用 年選擇器、月選擇器 的點選 */
    .ant-calendar-range-right {
      .ant-calendar-next-month-btn {
        display: none;
        //pointer-events: none;
      }
      .ant-calendar-next-year-btn {
        display: none;
        //pointer-events: none;
      }
      .ant-calendar-prev-year-btn {
        display: none;
        //pointer-events: none;
      }
      .ant-calendar-prev-month-btn {
        display: none;
        //pointer-events: none;
      }

      .ant-calendar-year-select, .ant-calendar-month-select {
        pointer-events: none;
        color: rgba(0, 0, 0, 0.25);
      }
    }
  }
}

           

import React, { useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import { DatePicker } from 'antd';

import styles from './index.less'

/**
 *  Created by yjl on 2021-08-19
 * 旬選擇器（本月上旬、本月中旬、本月下旬）
 * */
const XunPicker = (props) => {
  const { colName, form } = props;
  const [currentTime, setCurrentTime] = useState();
  const [pickerValue, setPickerValue] = useState();
  const ObserverRef = useRef(null);

  useEffect(() => {
    // 監聽dom節點改變，下月、下年按鈕要在上月、上年按鈕點選後才顯示
    ObserverRef.current = new MutationObserver(() => {
      observerDomChange();
    });

    return () =>  ObserverRef.current.disconnect();
  }, []);

  const addListener = (status) => {
    if (status) {
      // 日期歸位，目前月和下月，因為左邊面闆日期不能大于右邊面闆日期
      if (pickerValue) {
        setPickerValue([moment(), moment().add(1, 'month')]);

        setTimeout(() => {
          setPickerValue([undefined, undefined])
          setCurrentTime(undefined);
        })
      }

      // 月曆面闆打開時，節點尚未渲染完畢，是以要延時
      setTimeout(() => {
        const leftCalendar = document.querySelector(`.ant-calendar-range-part.ant-calendar-range-left`);

        ObserverRef.current.observe(leftCalendar, {
          childList: true,
          subtree: true
        });
        observerDomChange();
      });
    }
  };

  const observerDomChange = () => {
    const prevMonth = document.querySelector('.ant-calendar-range-left .ant-calendar-prev-month-btn') || {};
    const nextMonth = document.querySelector('.ant-calendar-range-left .ant-calendar-next-month-btn') || {};
    const prevYear = document.querySelector('.ant-calendar-range-left .ant-calendar-prev-year-btn') || {};
    const nextYear = document.querySelector('.ant-calendar-range-left .ant-calendar-next-year-btn') || {};

    prevMonth.onclick = () => handleDateChange('prevMonth');
    nextMonth.onclick = () => handleDateChange('nextMonth');
    prevYear.onclick = () => handleDateChange('prevYear');
    nextYear.onclick = () => handleDateChange('nextYear');
  };

  const handleDateChange = (type) => {
    if (type === 'prevMonth') {
      setCurrentTime((prevValue) => moment(prevValue).subtract(1, 'month'));
    }
    else if (type === 'nextMonth') {
      setCurrentTime((prevValue) => moment(prevValue).add(1, 'month'));
    }
    else if (type === 'prevYear') {
      setCurrentTime((prevValue) => moment(prevValue).subtract(1, 'years'));
    }
    else if (type === 'nextYear') {
      setCurrentTime((prevValue) => moment(prevValue).add(1, 'years'));
    }
  };

  return (
    <DatePicker.RangePicker
      disabledDate={(current) => current > moment().endOf('month')}
      dropdownClassName={styles['main-container']}
      value={pickerValue}
      onOk={(dates) => {
        setPickerValue(dates);

        form.setFieldsValue({
          [colName]: dates
        })
      }}
      onPanelChange={(dates) => {
        setCurrentTime(dates[0] > moment().endOf('month') ? moment() : dates[0])
      }}
      onOpenChange={(status) => addListener(status)}
      ranges={{
        '本月上旬': [moment(currentTime).startOf('month'), moment(currentTime).startOf('month').add(9, 'day')],
        '本月中旬': [moment(currentTime).startOf('month').add(10, 'day'),  moment(currentTime).startOf('month').add(19, 'day')],
        '本月下旬': [moment(currentTime).startOf('month').add(20, 'day'), moment(currentTime).endOf('month')]
      }}
    />
  )
}

XunPicker.propTypes  = {
  form: PropTypes.object.isRequired,    // 表單form對象
  colName: PropTypes.string.isRequired  // 表單字段名
}

export default XunPicker;
           

效果