elementui中el-date-picker年月日时分禁用时分

环境是elementui加vue2

elementplus的话有对应的禁用参数,无需这么麻烦。

下处代码逻辑为禁用小于当前日期跟时分

template中

  <template>
     <el-date-picker
        v-model="date"
        type="datetime"
        format="yyyy-MM-dd HH:mm"
        value-format="yyyy-MM-dd HH:mm"
        :style="{ width: '100%' }"
        :picker-options="pickerOptions"
    >
    </el-date-picker>
  </template>

date中

data(){
    return {
        date: undefined,
        pickerOptions: {
            selectableRange: "00:00:00 - 23:59:59",
            disabledDate: time =>
                time < new Date().setDate(new Date().getDate() - 1)
        }
    }
}

watch中

 watch: {
        "date"(val) {
            const date = new Date(val);
            const currentDate = new Date();
            if (date.getDate() == currentDate.getDate()) {
                let hours = currentDate.getHours();
                hours = hours < 10 ? "0" + hours : hours;
                const minutes = currentDate.getMinutes();
                this.pickerOptions.selectableRange = `${hours}:${minutes}:00 - 23:59:59`;
            } else {
                this.pickerOptions.selectableRange = "00:00:00 - 23:59:59";
                const year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();
                month = month < 10 ? "0" + month : month;
                day = day < 10 ? "0" + day : day;
                this.date = `${year}-${month}-${day} 00:00`;
            }
        }
    },

时分秒也是同理,在watch中更改时分秒即可

posted @ 2026-01-14 10:33  萝卜爱吃肉  阅读(1)  评论(0)    收藏  举报