常用二次封装Ant-design组件（2）--- DatePicker

原创

已于 2024-02-29 10:10:28 修改 · 1.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2024-02-28 17:39:10 首次发布

文章讲述了如何在React项目中使用DatePicker组件并结合Radio.Group实现日期选择的自定义形态，包括不同展示模式的切换和日期范围的选择。作者还分享了如何处理DatePicker的显示和隐藏问题以及样式调整技巧。

前言：依赖DatePicker二开的一个组件，主要是对Datepicker默认的展示形态进行一个处理（强烈建议Antd后续出自定义），如果React有现成能达到这种要求的包，求大佬告知（感觉肯定是有的，就是我不知道，焯）。

设计需求

需求展示形态单个模块，这里实现的时候用了Radio.Group作形态主体，antd的DatePicker组件里其实有一个api为variant(形态变体)，只不过只能调整边框和背景，类似ghost效果，但感觉后面版本会支持自定义。

代码实现（ts）

这两个代码是放在一个文件里的，这里拆开是方便阅读。

使用

<RadioTimePciker
    onFinished={(date, dateString, type) => {
				console.log(date, dateString, type);
			}}
/>

RadioGroup形态代码


const raditoStyle: React.CSSProperties = {
	width: "60px",
	height: "32px",
	textAlign: "center",
	paddingInline: "2px",
}


interface timeProps {
	onFinished: (date: dayjs.Dayjs | dayjs.Dayjs[] | undefined, dateString: string | string[], dateType: string) => void | undefined
}
// 日历形态
const RadioTimePciker = ({ onFinished }: timeProps) => {
	const SubtitleRef = useRef(null);
	const [dateValue, setDateValue] = useState<dayjs.Dayjs | dayjs.Dayjs[] | undefined>(undefined)
	const [left, SetLeft] = useState(0)  //pup偏移量
	// 存放各个时间值 
	const [state, setState] = useSet({
		picker_show: false,
		picker_type: "30day",
		timeString: undefined
	})
	const { picker_type, picker_show, } = state

	useEffect(() => {
		switch (picker_type) {
			case "7day":
				onFinished(dateValue, "7day", picker_type)
				break;
			case "30day":
				onFinished(dateValue, "30day", picker_type)
				break;
			case "week":
				const week = dateValue as dayjs.Dayjs
				onFinished(dateValue, getWeekRange(week), picker_type)
				break;
			case "month":
				const month = dateValue as dayjs.Dayjs
				onFinished(dateValue, getMonthRange(month), picker_type)
				break;
			case "custom":
				const custom = dateValue as dayjs.Dayjs[]
				const dateString = [custom[0].format("YYYY-MM-DD"), custom[1].format("YYYY-MM-DD")]
				onFinished(dateValue, dateString, picker_type)
				break;
			case "date":
				const date = dateValue as dayjs.Dayjs
				onFinished(dateValue, date.format("YYYY-MM-DD"), picker_type)
				break;
		}
		// console.log(dateValue.subtract(7, "day").format('YYYY-MM-DD'));

	}, [dateValue])


	// 日期选择完成
	const

最低0.47元/天解锁文章