前端Ant Design DatePicker限定日期选择范围

最新推荐文章于 2024-08-15 11:54:21 发布

ProjectNo

最新推荐文章于 2024-08-15 11:54:21 发布

阅读量5.3k

点赞数 5

本文链接：https://blog.csdn.net/projectno/article/details/109462509

版权

前端专栏收录该内容

17 篇文章 5 订阅

订阅专栏

Ant版本为1.X，API中有的笔者就不介绍了，下面介绍一些遇到过的问题和解决方案：

文章目录

自定义日期选择范围

自定义日期选择范围

API中有介绍如何用开始时间去限定结束时间的选择范围，或者用结束时间去限定开始时间选择范围。我们一般会用自己的时间限定选择范围，而自己的时间一般是字符串格式，如“2020-11-11”，或者用new Date()声明的日期，这时候就要做一些处理，废话不多说上代码：

template：
<a-date-picker
	 placeholder="选择日期"
	 dateFormat="YYYY-MM-DD"
	 style="width:200px"
	 :disabledDate="disabledDate"
></a-date-picker>

import moment from 'moment'

选择范围小于等于今天

methods：
moment,
//endOf()是将其设置为时间单位的末尾，可以参考moment的API
disabledDate(current) {
	return current > moment().endOf('day')
},

在这里插入图片描述

选择范围小于今天

methods：
moment,
//subtract(1, 'days')是增加一日，还有参数'years'、'months'和'weeks',也可以用负数去减相应的单位
disabledDate(current) {
	return current > moment().subtract(1, 'days').endOf('day')
},

在这里插入图片描述

选择范围大于等于今天

moment,
//注意：这里如果不加上subtract()，在选择一次日期之后今天就不能选了
disabledDate(current) {
	return current && current <= moment().subtract(1, 'days').endOf('day')
},

在这里插入图片描述

选择范围只能是昨天、今天和后天

moment,
//注意：这里如果不加上subtract()，在选择一次日期之后今天就不能选了
disabledDate(current) {
	return !(current > moment().subtract(2, 'days').endOf('day') && current < moment().subtract(-1, 'days').endOf('day'))
},

在这里插入图片描述

日期格式和字符串格式限定选择范围

字符串格式日期选择范围小于今天

methods：
moment,
disabledDate(current) {
	return current.valueOf() >= moment('2020-11-03')
},

date格式日期选择范围小于今天

date转成字符串之后再限定日期

methods：
moment,
disabledDate(current) {
	return current.valueOf() >= moment(dateFormat())
},
//格式化时间
dateFormat() {
	let date = new Date()
	let Y = date.getFullYear() + '-'
	let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
	let D = date.getDate()
	return Y + M + D
},