您当前的位置: 首页 > 技术文章 > 前端开发

Antd插件rangePicker组件限制选择时间范围为1年

作者: 时间:2023-08-11阅读数:人阅读

最近对选择日期有限制,要求默认初始显示为前一个月的时间,结束时间为当前时间,并且可选择的范围为12个月
题主使用的是antd4版本的

初始时间和结束时间

初始时间以及结束时间可以使用moment函数,format函数进行设置
需要使用到RangePicker中defaultDate属性

let startTime = moment(new Date()).subtract(1,'month').format('YYYY-MM-DD');
let endTime = moment().format('YYYY-MM-DD')

时间限制为一年

需要使用到onCalendarChange,disabledDate属性

let [days, setDays] = useState();
const onCalendarChange=() => {val => setDays(val)}

const disableData = (current) => {
	if(!days) {
		return false;
	}
	
	const tooLate = days[0] && current.diff(days[0], 'days') > 365;
	return !!tooEarly || !!tooLate;
}

使用

<RangDatePicker change={dateChange} default={[startTime, endTime]} onCalendarChange={onCalendarChange} disableDate={disableDate}/>

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:licqi@yunshuaiweb.com

标签: javascript react
加载中~
如果您对我们的成果表示认同并且觉得对你有所帮助可以给我们捐赠。您的帮助是对我们最大的支持和动力!
捐赠我们
扫码支持 扫码支持
扫码捐赠,你说多少就多少
2
5
10
20
50
自定义
您当前余额:元
支付宝
微信
余额

打开支付宝扫一扫,即可进行扫码捐赠哦

打开微信扫一扫,即可进行扫码捐赠哦

打开QQ钱包扫一扫,即可进行扫码捐赠哦