React antd的datePicker自定义，封装成组件

embedded/2025/3/1 11:14:50/
一、antd的datePicker自定义
需求：用户需要为日期选择器的每个日期单元格添加一个Tooltip，当鼠标悬停时显示日期、可兑换流量余额和本公会可兑流量。这些数据需要从接口获取。我需要结合之前的代码，确保Tooltip正确显示，并且数据来自接口。

主要汉化点：

  1. 整个日期选择器面板中文化
  2. 星期显示为中文（周一 到 周日）
  3. 月份显示为中文格式
  4. 操作按钮汉化（"确定"、"现在" 等）
  5. 日期格式统一使用中文年月日
  6. 加载提示中文化
  7. Tooltip内容中文化

效果包含：

  • 月份显示为 "2024年5月"
  • 星期列显示为 "一、二、三、四、五、六、日"
  • 今天按钮显示为 "今天"
  • 确定按钮显示为 "确定"
  • 十年范围显示为 "2020-2029"
  • 时间列显示为 "时","分","秒"
  • index.tsx文件
import React, { useState, useEffect } from 'react';
import { DatePicker, Tooltip, Spin, ConfigProvider } from 'antd';
import dayjs, { Dayjs } from 'dayjs';
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
import './custom-datepicker.css';
import 'dayjs/locale/zh-cn';
import zhCN from 'antd/locale/zh_CN';
dayjs.extend(isSameOrAfter);
dayjs.extend(isSameOrBefore);
dayjs.locale('zh-cn'); // 设置dayjs为中文interface TrafficData {date: string;personal: string;guild: string;
}const App: React.FC = () => {const [selectedDate, setSelectedDate] = useState<Dayjs | null>(null);const [trafficData, setTrafficData] = useState<Record<string, TrafficData>>({});const [loading, setLoading] = useState(true);const today = dayjs().startOf('day');const sevenDaysLater = today.add(6, 'day');useEffect(() => {const mockApi = async () => {const data: Record<string, TrafficData> = {};Array.from({ length: 7 }).forEach((_, i) => {const date = today.add(i, 'day').format('YYYY-MM-DD');data[date] = {date,personal: `${[0, 20, 30, 40, 80, 100, 50][i]}%`,guild: `${Math.floor(Math.random() * 100000).toLocaleString()}`,};});await new Promise(resolve => setTimeout(resolve, 500));setTrafficData(data);setLoading(false);};mockApi();}, []);const disabledDate = (current: Dayjs) => current.isBefore(today, 'day') || current.isAfter(sevenDaysLater, 'day');if (loading) return <Spin tip="数据加载中..." />;return (<ConfigProvider locale={zhCN}> {/* 设置Ant Design为中文 */}<DatePickervalue={selectedDate}disabledDate={disabledDate}onChange={setSelectedDate}dropdownClassName="custom-picker-dropdown"dateRender={current => {const dateStr = current.format('YYYY-MM-DD');const data = trafficData[dateStr];const isInRange = current.isSameOrAfter(today) && current.isSameOrBefore(sevenDaysLater);const isSelected = selectedDate?.isSame(current, 'day');return (<div className="custom-cell-wrapper"><div className="native-cell-content">{current.date()}</div><Tooltiptitle={data ?`${dayjs(dateStr).format('YYYY年M月D日')}\n可兑流量余额: ${data.personal}\n本公会可兑流量: ${data.guild}`: '无可用数据'}overlayStyle={{whiteSpace: 'pre-line',pointerEvents: 'none',}}placement="bottom"mouseEnterDelay={0}mouseLeaveDelay={0.1}trigger={['hover']}getPopupContainer={trigger => trigger.parentElement!}><div className={`custom-cell ${isInRange ? 'recent-date' : ''}`}><div className={`date-number ${isSelected ? 'selected' : ''}`}>{current.date()}</div>{data && (<div className={`availability ${data.personal === '0%' ? 'empty' : ''}`}>余{data.personal}</div>)}</div></Tooltip></div>);}}/></ConfigProvider>);
};export default App;
/* custom-datepicker.css */
.custom-picker-dropdown {z-index: 1001;
}.custom-cell-wrapper {position: relative;height: 100%;width: 100%;
}.native-cell-content {visibility: hidden;
}.custom-cell {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;cursor: pointer;z-index: 2;padding: 3px 0;
}.date-number {width: 24px;height: 24px;line-height: 24px;text-align: center;color: #000;transition: all 0.2s;border-radius: 50%;
}.date-number.selected {background: #1890ff;color: white !important;
}.recent-date:hover .date-number:not(.selected) {color: #1890ff;
}.availability {font-size: 10px;line-height: 14px;color: #1890ff;margin-top: 2px;
}.availability.empty {color: #ff4d4f !important;
}.ant-picker-cell-inner {padding: 0 !important;height: 100% !important;
}.ant-picker-cell:hover .ant-picker-cell-inner {background: transparent !important;
}/* 添加中文面板样式调整 */
.ant-picker-date-panel {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}.ant-picker-header-view button {font-weight: 500;
}.ant-picker-cell-inner::before {border-radius: 50% !important;
}

二、封装成组件

  • DateSelector.tsx文件
// DateSelector.tsx
import React from 'react';
import {DatePicker, Tooltip, Spin, ConfigProvider} from 'antd';
import dayjs, { Dayjs } from 'dayjs';
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
import 'dayjs/locale/zh-cn';
import './custom-datepicker.css';
import zhCN from 'antd/locale/zh_CN';dayjs.extend(isSameOrAfter);
dayjs.extend(isSameOrBefore);export interface TrafficData {personal: string;guild: string;
}interface DateSelectorProps {value?: Dayjs | null;trafficData: Record<string, TrafficData>;onChange?: (date: Dayjs | null) => void;loading?: boolean;
}const DateSelector: React.FC<DateSelectorProps> = ({value,trafficData,onChange,loading = false,
}) => {const today = dayjs().startOf('day');const sevenDaysLater = today.add(6, 'day');const disabledDate = (current: Dayjs) => current.isBefore(today, 'day') || current.isAfter(sevenDaysLater, 'day');const handleChange = (date: Dayjs | null) => {onChange?.(date);};if (loading) {return <Spin tip="数据加载中..." style={{ padding: '8px 0' }} />;}return (<ConfigProvider locale={zhCN}> {/* 设置Ant Design为中文 */}<DatePickervalue={value}disabledDate={disabledDate}onChange={handleChange}dropdownClassName="custom-picker-dropdown"dateRender={current => {const dateStr = current.format('YYYY-MM-DD');const data = trafficData[dateStr];const isInRange = current.isSameOrAfter(today) && current.isSameOrBefore(sevenDaysLater);const isSelected = value?.isSame(current, 'day');return (<div className="custom-cell-wrapper"><div className="native-cell-content">{current.date()}</div><Tooltiptitle={data ?`${dayjs(dateStr).format('YYYY年M月D日')}\n可兑流量余额: ${data.personal}\n本公会可兑流量: ${data.guild}`: '无可用数据'}overlayStyle={{whiteSpace: 'pre-line',pointerEvents: 'none',}}placement="bottom"mouseEnterDelay={0}mouseLeaveDelay={0.1}><div className={`custom-cell ${isInRange ? 'recent-date' : ''}`}><div className={`date-number ${isSelected ? 'selected' : ''}`}>{current.date()}</div>{data && (<div className={`availability ${data.personal === '0%' ? 'empty' : ''}`}>余{data.personal}</div>)}</div></Tooltip></div>);}}/></ConfigProvider>);
};export default DateSelector;
/* custom-datepicker.css */
.custom-picker-dropdown {z-index: 1001;
}.custom-cell-wrapper {position: relative;height: 100%;width: 100%;
}.native-cell-content {visibility: hidden;
}.custom-cell {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;cursor: pointer;z-index: 2;padding: 3px 0;
}.date-number {width: 24px;height: 24px;line-height: 24px;text-align: center;color: #000;transition: all 0.2s;border-radius: 50%;
}.date-number.selected {background: #1890ff;color: white !important;
}.recent-date:hover .date-number:not(.selected) {color: #1890ff;
}.availability {font-size: 10px;line-height: 14px;color: #1890ff;margin-top: 2px;
}.availability.empty {color: #ff4d4f !important;
}.ant-picker-cell-inner {padding: 0 !important;height: 100% !important;
}.ant-picker-cell:hover .ant-picker-cell-inner {background: transparent !important;
}/* 添加中文面板样式调整 */
.ant-picker-date-panel {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}.ant-picker-header-view button {font-weight: 500;
}.ant-picker-cell-inner::before {border-radius: 50% !important;
}
  • index.tsx文件
// 使用示例 ParentComponent.tsx
import React, { useState, useEffect } from 'react';
import DateSelector, { TrafficData } from './DateSelector';
import dayjs from 'dayjs';const ParentComponent: React.FC = () => {const [selectedDate, setSelectedDate] = useState<dayjs.Dayjs | null>(null);const [trafficData, setTrafficData] = useState<Record<string, TrafficData>>({});const [loading, setLoading] = useState(true);const today = dayjs().startOf('day');// useEffect(() => {//   // 模拟API调用//   const mockFetchData = async () => {//     const mockData = {//       [dayjs().format('YYYY-MM-DD')]: {//         personal: '80%',//         guild: '100,000',//       },//       [dayjs().add(1, 'day')//         .format('YYYY-MM-DD')]: {//         personal: '50%',//         guild: '75,000',//       },//     };////     await new Promise(resolve => setTimeout(resolve, 800));//     setTrafficData(mockData);//     setLoading(false);//   };////   mockFetchData();// }, []);useEffect(() => {const mockApi = async () => {const data: Record<string, TrafficData> = {};Array.from({ length: 7 }).forEach((_, i) => {const date = today.add(i, 'day').format('YYYY-MM-DD');data[date] = {personal: `${[0, 20, 30, 40, 80, 100, 50][i]}%`,guild: `${Math.floor(Math.random() * 100000).toLocaleString()}`,};});await new Promise(resolve => setTimeout(resolve, 500));setTrafficData(data);setLoading(false);};mockApi();}, []);return (<div style={{ padding: 24 }}><h2>日期选择器示例</h2><div style={{ marginBottom: 16 }}>当前选择：{selectedDate?.format('YYYY年M月D日') || '未选择'}</div><DateSelectorvalue={selectedDate}trafficData={trafficData}onChange={setSelectedDate}loading={loading}/></div>);
};export default ParentComponent;

三、生效时间选择完日期后，还需填入具体时间（或提供一个时间选择器），精确到分，默认为00:00；如选择的日期为今天，则填写的时间不能早于当前时间

// index.tsx
import React, { useState, useEffect } from 'react';
import { Row, Col, TimePicker, Spin, ConfigProvider } from 'antd';
import DateSelector, { TrafficData } from './DateSelector';
import dayjs, { Dayjs } from 'dayjs';
import zhCN from 'antd/locale/zh_CN';declare module 'dayjs' {interface Dayjs {isToday(): boolean;}
}dayjs.extend((o, c) => {c.prototype.isToday = function () {return this.isSame(dayjs(), 'day');}
});const DateTimePicker: React.FC = () => {const [selectedDate, setSelectedDate] = useState<Dayjs | null>(null);const [selectedTime, setSelectedTime] = useState<Dayjs>(dayjs().startOf('minute'));const [trafficData, setTrafficData] = useState<Record<string, TrafficData>>({});const [loading, setLoading] = useState(true);const today = dayjs().startOf('day');const disabledTime = (current: Dayjs | null) => {if (!current || !selectedDate?.isToday()) {return { disabledHours: () => [], disabledMinutes: () => [] };}const now = dayjs();return {disabledHours: () => {const currentHour = now.hour();return Array.from({ length: currentHour }, (_, i) => i);},disabledMinutes: (selectedHour: number) => {if (selectedHour < now.hour()) return [];return Array.from({ length: now.minute() }, (_, i) => i);},};};const handleDateChange = (date: Dayjs | null) => {setSelectedDate(date);setSelectedTime(date?.isToday() ? dayjs().startOf('minute') : dayjs().startOf('day'));};// useEffect(() => {//   // 模拟API请求//   const mockData = {//     [dayjs().format('YYYY-MM-DD')]: { personal: '80%', guild: '100,000' },//     [dayjs().add(1, 'day')//       .format('YYYY-MM-DD')]: { personal: '50%', guild: '75,000' },//   };////   setTimeout(() => {//     setTrafficData(mockData);//     setLoading(false);//   }, 800);// }, []);useEffect(() => {const mockApi = async () => {const data: Record<string, TrafficData> = {};Array.from({ length: 7 }).forEach((_, i) => {const date = today.add(i, 'day').format('YYYY-MM-DD');data[date] = {personal: `${[0, 20, 30, 40, 80, 100, 50][i]}%`,guild: `${Math.floor(Math.random() * 100000).toLocaleString()}`,};});await new Promise(resolve => setTimeout(resolve, 500));setTrafficData(data);setLoading(false);};mockApi();}, []);return (<ConfigProvider locale={zhCN}> {/* 设置Ant Design为中文 */}<div style={{ padding: 24, maxWidth: 380, margin: '0 auto' }}><h2 style={{ marginBottom: 24 }}>预约时间选择</h2><Row gutter={24} align="middle"><Col span={12}>{/*<div style={{ marginBottom: 8 }}>选择日期</div>*/}<DateSelectorvalue={selectedDate}trafficData={trafficData}onChange={handleDateChange}loading={loading}/></Col><Col span={12}>{/*<div style={{ marginBottom: 8 }}>选择时间</div>*/}<TimePickervalue={selectedTime}format="HH:mm"minuteStep={1}disabledTime={disabledTime}onChange={time => setSelectedTime(time || dayjs().startOf('minute'))}placeholder="请选择时间"disabled={!selectedDate}allowClear={false}showNow={false}style={{ width: '100%' }}/></Col></Row><div style={{ marginTop: 24, padding: 16, background: '#f5f5f5', borderRadius: 4 }}>已选择时间: {selectedDate ?`${selectedDate.format('YYYY年MM月DD日')} ${selectedTime.format('HH:mm')}`: '请先选择日期'}</div></div></ConfigProvider>);
};export default DateTimePicker;


http://www.ppmy.cn/embedded/169038.html

相关文章

【Prometheus】prometheus服务发现与relabel原理解析与应用实战

【Prometheus】prometheus服务发现与relabel原理解析与应用实战

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全…
阅读更多...
Android实现漂亮的波纹动画

Android实现漂亮的波纹动画

Android实现漂亮的波纹动画 本文章讲述如何使用二维画布canvas和camera、矩阵实现二、三维波纹动画效果&#xff08;波纹大小变化、画笔透明度变化、画笔粗细变化&#xff09; 一、UI界面 界面主要分为三部分 第一部分&#xff1a;输入框&#xff0c;根据输入x轴、Y轴、Z轴倾…
阅读更多...
【MySQL】数据库开发技术：内外连接与表的索引穿透深度解析

【MySQL】数据库开发技术：内外连接与表的索引穿透深度解析

**前言:**本节内容主要讲解表的内连和外连以及索引的一部分。 注意&#xff1a; 索引是很重要的知识点。务必学习&#xff01;&#xff01;本节将会主要谈一谈什么是索引&#xff0c;如何理解索引。 以及怎么理解MySQL与磁盘的关系。 下面友友们开始学习吧&#xff01; ps&…
阅读更多...
【北京迅为】iTOP-RK3568OpenHarmony系统南向驱动开发-第2章 内核HDF驱动框架架构

【北京迅为】iTOP-RK3568OpenHarmony系统南向驱动开发-第2章 内核HDF驱动框架架构

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…
阅读更多...
自动化测试无法启动(java.net.SocketException)

自动化测试无法启动(java.net.SocketException)

在运行测试代码,对浏览器进行自动化操作时,遇到了以下问题,添加依赖,编写了测试代码,但是程序无法运行 这个有两种原因(我使用的是谷歌浏览器): 网络问题: 因为需要从GitHub上下载对应包,所以有时候可能会出现网络问题,这个时候可以打开VPN之后,重新对程序进行启动 浏览器版本…
阅读更多...
Linux系统软件管理

Linux系统软件管理

systemctl 控制软件启动和关闭 Linux系统很多软件支持使用systemctl命令控制&#xff1a;启动&#xff0c;停止&#xff0c;开启自启。 能被systemctl管理的软件&#xff0c;一般被称为&#xff1a;服务。 语法&#xff1a;systemctl start|stop|status|enable|disable 服务名…
阅读更多...
FFmpeg av_read_frame 和iOS系统提供的 AVAudioRecorder 实现音频录制的区别

FFmpeg av_read_frame 和iOS系统提供的 AVAudioRecorder 实现音频录制的区别

1. 第一种方式：使用 FFmpeg 的 av_read_frame 特点 底层实现：基于 FFmpeg，这是一个强大的多媒体处理库，直接操作音频流。灵活性：非常灵活，可以处理多种音频格式、编解码器和输入设备。复杂性：需要手动管理音频流、数据包（AVPacket）、内存释放等，代码复杂度较高。跨平…
阅读更多...
ChatGPT Deep Research：重塑智能研究的未来边界

ChatGPT Deep Research：重塑智能研究的未来边界

目录 **ChatGPT Deep Research：重塑智能研究的未来边界****核心功能与技术突破****技术架构与性能优势****部署计划与用户价值****未来展望与挑战****结语**ChatGPT Deep Research：重塑智能研究的未来边界 引言 在人工智能技术飞速迭代的今天，OpenAI推出的Deep Research功能…
阅读更多...
最新文章

Copyright @ 2022~2023