<template>
<div>
<crec-date-picker
placeholder="不预定"
:disabledDate="disabledDate"
:disabledTime="disabledDateTime"
:showToday="false"
@change="onChangePicker"
:showTime="{ format: 'HH:mm:ss' }"
format="YYYY-MM-DD HH:00"
/>
</div>
</template>
<script>
import moment from 'moment'
export default {
methods: {
moment,
// 时间范围方法
range (start, end) {
const result = []
for (let i = start; i < end; i++) {
result.push(i)
}
return result
},
// 日期禁用
disabledDate (current) {
// return current && current < moment().subtract(1, 'days')
return current && current < moment().subtract(1, 'days').endOf('day')
// return current && current < moment().endOf('day')
},
// 时间禁止
disabledDateTime (dates) {
const hours = moment().hours() + 1// 0~23
// const minutes = moment().minutes()// 0~59
// const seconds = moment().seconds()// 0~59
// 当日只能选择当前时间之后的时间点
if (moment(dates).date() === moment().date()) {
return {
disabledHours: () => this.range(0, 24).splice(0, hours),
disabledMinutes: () => this.range(0, 60),
disabledSeconds: () => this.range(0, 60)
}
} else {
return {
disabledMinutes: () => this.range(0, 60),
disabledSeconds: () => this.range(0, 60)
}
}
},
}
}
</script>
antd vue 日期控件限制只可选择今天及今天以后的
最新推荐文章于 2022-12-13 16:11:24 发布