需求

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

由于Antd 3.x 的RangePicker沒有上月、下月、上年、下年的點擊回調，我不能判斷當前是哪年哪月，時間范圍快捷選擇不能動態(tài)改變，所以我用監(jiān)聽DOM節(jié)點實現

代碼

.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(() => {// 監(jiān)聽dom節(jié)點改變，下月、下年按鈕要在上月、上年按鈕點擊后才顯示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);})}// 日歷面板打開時，節(jié)點尚未渲染完畢，所以要延時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.RangePickerdisabledDate={(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;

效果

總結

以上是生活随笔為你收集整理的Antd DatePicker之旬查询（本月上旬、本月中旬、本月下旬）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。