【记录】antd-vue的date-picker时间选择限制
antd-vue的date-picker时间选择限制开始时间只能从当天开始选择,并且限制具体时分秒结束时间可与开始时间同天,或者第二天以此类推
·
首先
时间可以选择至年月日以及时分秒,使用valueFormat
<a-date-picker
valueFormat="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
v-model="model.beginTime"
placeholder="请选择开始时间"
@ok="chooseBeginTime"
></a-date-picker>
1.限制只能选择从当天开始的日期,使用disabled-date
<a-date-picker
valueFormat="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
v-model="model.beginTime"
placeholder="请选择开始时间"
@ok="chooseBeginTime"
:disabled-date="disabledDate"
></a-date-picker>
disabledDate(cur) {
//获取当前时间
const now = moment().format('YYYY-MM-DD') + ' 00:00:00'
let dateT = moment(now).valueOf()
//置灰日期小于当前时间
return cur < dateT
}
2.限制只能选择从当前开始的时间,使用disabled-time,要搭配show-time一起使用,选择时可直接定位到可选时间位置
<a-date-picker
valueFormat="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
v-model="model.beginTime"
placeholder="请选择开始时间"
@ok="chooseBeginTime"
:disabled-date="disabledDate"
show-time
:disabled-time="disabledDateTime"
></a-date-picker>
range(start, end) {
const result = []
for (let i = start; i < end; i++) {
result.push(i)
}
return result
},
disabledDateTime(e) {
let day
const now = moment()
if (!e) {
day = now
} else {
day = e
}
//当前选中的时间
const [year, month, date, hour, minute, second] = [
day.year(),
day.month() + 1,
day.date(),
day.hour(),
day.minute(),
day.second(),
]
//判断选中时间与现在时间
let disabledHours = []
let disabledMinutes = []
let disabledSeconds = []
if (year == now.year() && month == now.month() + 1 && date == now.date()) {
disabledHours = this.range(0, 24).splice(0, now.hour())
if (hour == now.hour()) {
disabledMinutes = this.range(0, 60).splice(0, now.minute())
if (minute == now.minute()) {
disabledSeconds = this.range(0, 60).splice(0, now.second())
}
}
}
return {
disabledHours: () => disabledHours,
disabledMinutes: () => disabledMinutes,
disabledSeconds: () => disabledSeconds,
}
},
其次
结束时间选择与开始时间可为同一天
:disabled-date="disabledEndDate"
disabledEndDate(current) {
if (!this.model.beginTime) {
return true
} else {
return current < moment(this.model.beginTime.split(' ')[0]).add(0, 'days')
}
}
结束时间选择是开始时间的第二天
disabledEndDate(current) {
if (!this.model.beginTime) {
return true
} else {
//修改这里
return current < moment(this.model.beginTime.split(' ')[0]).add(1, 'days')
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)