element日期时间组件如何让用户此刻之前的日期与时间不能选择
<el-form-item prop="validity" label="预警有效期"> <el-date-picker v-model="form.validity" type="datetime" placeholder="选择日期时间" :picker-options="{ disabledDate(time) { return time.getTime() < Date.now() - 8.64e7; }, selectableRange: startTimeRange, }" > </el-date-picker> </el-form-item>
data () { return { form: { validity: null, }, startTimeRange: '', } }, mounted () {
let st = moment(new Date().getTime()).format('HH:mm:ss')
this.startTimeRange = st + ' - 23:59:59'
},
watch: { 'form.validity': { handler(newValue, oldValue) { if (newValue) { let date = moment(Date.now()).startOf('day').format('YYYY-MM-DD') let dateTime = moment(new Date().getTime()).format('HH:mm:ss') let newVal = moment(newValue).format('YYYY-MM-DD') let st = '' if (newVal == date) { // 是今天, 选择的时间开始为此刻的时分秒 st = dateTime // 切换日期的时候,如果日期为今天,且时间少于当前时间,则设为今日当前时间 if (new Date(newValue).getTime() < new Date().getTime()) { this.$set(this.form, 'validity', moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss')) } } else { // 明天及以后从0时开始 st = '00:00:00' } this.startTimeRange = st + ' - 23:59:59' } } } },
效果:
今日此时此刻之前的日期、时间禁止选用,切换日期和时间为“2022-07-29 00:00:00",再切换为”2022-07-28 00:00:00"时, 会给form.validity默认赋值为今日此时此刻(日期时间少于今日此时此刻则重新赋值)