需求

实现旬查询，本月上旬为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之旬查询（本月上旬、本月中旬、本月下旬）相关推荐

PHP判断几天是某月的上旬、中旬或下旬
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
mysql 本周函数_【转】MySQL时间函数的使用：查询本周、下周、本月、下个月份的数据...
MySQL时间函数的使用:查询本周.上周.本月.上个月份的数据[转] /*今天*/ select * from 表名 where to_days(时间字段) = to_days(now()); /*昨 ...
Sql 查询当天、本周、本月记录
--查询当天: select * from info where DateDiff(dd,datetime,getdate())=0 --查询24小时内的: select * from info wh ...
mysql查询去年本月的数据_MySQL查询本周、上周、本月、上个月份数据的sql代码...
MySQL查询的方式很多,下面为您介绍的MySQL查询实现的是查询本周.上周.本月.上个月份的数据,如果您对MySQL查询方面感兴趣的话,不妨一看 ..查询当前这周的数据 SELECT name,su ...
mysql 统计本月的_MySql查询当天、本周、本月、本季度、本年的数据
1.今天 SELECT * FROM 表名 WHERE TO_DAYS(时间字段名) = TO_DAYS(NOW()); 2.昨天 SELECT * FROM 表名 WHERE TO_DAYS(NOW ...
查询一个表中一个字段相同的数据_最实用MySQL 查询当天、本周，本月、上一个月的数据...
MySQL 查询当天.本周,本月.上一个月的数据 mysql查询当天的所有信息: SELECT * FROM 表名 WHERE year(时间字段名)=year(now()) and month(时间 ...
MySQL查询下周一_mysql 查询本周、下周、本月、下个月份的数据
mysql 查询本周.上周.本月.上个月份的数据查询当前这周的数据 SELECT name,submittime FROM enterprise WHERE YEARWEEK(date_format ...
mysql 日期查询下周,MySQL时间函数的使用：查询本周、下周、本月、下个月份的数据【转】...
MySQL时间函数的使用:查询本周.上周.本月.上个月份的数据[转] /*今天*/ select * from 表名 where to_days(时间字段) = to_days(now()); /*昨 ...
mysql 查询当天、本周、本月、上一个月、季度等数据
今天 select * from 表名 where to_days(时间字段名) = to_days(now());昨天 SELECT * FROM 表名 WHERE TO_DAYS( NOW( ) ...
oracle旬统计,Oracle准时间分旬查询
Oracle按时间分旬查询最近在工作的时候,需要出报表,今天是出一个旬度报表,所谓旬度,即每月的十天为一旬, 前10天(1-10号)为上旬,中10天(11-20号)为中旬,余下的为下旬. 在orac ...

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

需求

代码

效果

Antd DatePicker之旬查询（本月上旬、本月中旬、本月下旬）相关推荐

最新文章

热门文章