怎么让el-date-picker当之前时间包含时分秒不可选？

Z时代
2024-02-23
分类：IT

怎么让el-date-picker当之前时间包含时分秒不可选？使用的是element-plus

回答：

       <el-date-picker v-model.trim="form.reviewActivitiesManageInfo.replyEndTime"
                      style="display: flex; width: 100%;"
                      type="datetime"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      placeholder="请选择回复截止时间"
                      :disabled-date="disableDate" 
                      :disabled-hours="disabledHour"
                      :disabled-minutes="disabledMinute" 
                      :disabled-seconds="disabledSecond"
                    /> 
/** 禁选日期 */
const disableDate = (time) => {
  return time.getTime() < Date.now() - 8.64e7
}
const disabledHour = () => {
  const arrs = []
  for (let i = 0; i < 24; i ++) {
    if (new Date().getHours() <= i) continue
    arrs.push(i)
  }
  return arrs
}
/** 禁选分钟：如果当前选择的日期和时间，和被禁选的日期和时间为同一天同一小时，则进行分钟的禁用 */
const disabledMinute = () => {
  const arrs = []
  for (let i = 0; i < 60; i ++) {
    if (new Date().getMinutes() <= i) continue
    arrs.push(i)
  }
  return arrs
}
/* 限制秒 */
const disabledSecond = () => {
  const arrs = []
  for (let i = 0; i < 60; i ++) {
    if (new Date().getSeconds() <= i) continue
    arrs.push(i)
  }
  return arrs}

回答：

<template>
  <el-date-picker
    v-model="date"
    type="datetime"
    placeholder="选择日期时间"
    :disabledDate="disabledDate"
  ></el-date-picker>
</template>
<script>
export default {
  data() {
    return {
      date: ''
    };
  },
  methods: {
    disabledDate(time) {
      const now = new Date();
      return time.getTime() < now.getTime();
    }
  }
};
</script>