文章目录
- 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;
- 效果图: