【Antd】给 DatePicker 设置快捷时间选项

文章目录

  • antd 版本:
shell 复制代码
"antd": "^4.0.0",
  • api可以看出,他只提供了showToday的快捷选项,那我们如果要设置其他快捷选项该怎么办呢?
  • 这使用就要用到他的renderExtraFooter属性,给自定义快捷项一个放置的位置
  • 由于他没有属性可以像showToday直接设置时间,所以需要手动给DatePicker组件赋值value
  • 有关moment是怎么设置相应时间,可以看官方文档:http://momentjs.cn/
ts 复制代码
import { DatePicker, Space } from 'antd';
import React from 'react';

const { RangePicker } = DatePicker;

const App: React.FC = () => {
	const [value, setValue]= useState<any>(null)
	// 获取对应天数后的时间。
	const getDate = (val)=>{
		switch(val){
			case '七天':
				// startOf表示从今天开始,add表示往后加7天,format表示最后输出的格式2024-03-12
				return moment().startOf('day').add(7, 'days').format('YYYY-MM-DD');
			case '一个月':
				return moment().startOf('day').add(1, 'months').format('YYYY-MM-DD');
			case '半年':
				return moment().startOf('day').add(6, 'months').format('YYYY-MM-DD');
			case '一年':
				return moment().startOf('day').add(1, 'year').format('YYYY-MM-DD');
			defalult: 
				return val;
		}
	}
    return <DatePicker 
    	// 关闭今天的快捷项,避免出现2个页脚
    	showToday={false}
    	// 动态控制value值
    	value={value} 
    	onChange={date => setValue(date)}
    	// 添加快捷选项页脚
    	renderExtraFooter: () => {
	    	return (
        		<Space>
            		<a onClick={() => setValue(getDate('七天'))}>七天</a>
                	<a onClick={() => setValue(getDate('一个月'))}>一个月</a>
                	<a onClick={() => setValue(getDate('半年'))}>半年</a>
                	<a onClick={() => setValue(getDate('一年'))}>一年</a>
            	</Space>
         )} 
     />
{;

export default App;
  • 效果图:
相关推荐
GISer_Jing3 分钟前
前端面试常考题目详解
前端·javascript
Boilermaker19921 小时前
【Java EE】SpringIoC
前端·数据库·spring
中微子1 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y2 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry2 小时前
Fetch 笔记
前端·javascript
拾光拾趣录2 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟2 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan2 小时前
一文了解什么是Dart
前端·flutter·dart