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
},