需求

实现旬查询，本月上旬为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.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之旬查询（本月上旬、本月中旬、本月下旬）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。