antd-vue日期选择器
前言
自定义日期选择范围
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'
选择范围小于等于今天
data(){
return {
moment,
//endOf()是将其设置为时间单位的末尾,可以参考moment的API
disabledDate(current) {
return current > moment().endOf('day')
},
}
}
选择范围小于今天
data(){
return {
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'))
},
我这只是碰到了问题,详细请看大佬前端Ant Design DatePicker限定日期选择范围