【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;
  • 效果图:
相关推荐
还是鼠鼠2 分钟前
Android移动应用开发入门示例:Activity跳转界面
android·前端·gitee·android studio·android-studio
不知疲倦的仄仄7 分钟前
跨域 同源策略通俗讲解
前端·后端·spring·edge浏览器
珹洺12 分钟前
Jsp技术入门指南【十】IDEA 开发环境下实现 MySQL 数据在 JSP 页面的可视化展示,实现前后端交互
java·运维·前端·mysql·intellij-idea·jsp
excel15 分钟前
webpack 运行时模版 第 六 节 /lib/RuntimeTemplate.js
前端
excel17 分钟前
webpack JS meta 信息插件 /lib/JavascriptMetaInfoPlugin.js
前端
前端极客探险家18 分钟前
前端 Excel 工具组件实战:导入 → 可编辑表格 → 导出 + 样式同步 + 单元格合并
前端·typescript·vue·excel
好_快19 分钟前
Lodash源码阅读-uniq
前端·javascript·源码阅读
胡八一1 小时前
如何在 Dialog 中安全初始化 ECharts 并自动监听容器大小变化
前端·安全·echarts
qq_456001652 小时前
在Vue3中,如何在父组件中使用v-model与子组件进行双向绑定?
前端·javascript·vue.js
sunbyte5 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css