element 时间选择器通过 disabledDate 设置禁用日期及行内样式

原创于 2023-03-07 19:43:33 发布 · 930 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #vue.js #前端

文章展示了如何在Vue.js应用中使用el-date-picker组件来限制用户选择的日期。通过v-model和:disabled-date属性，可以禁止选择当前时间之后或之前的日子，确保用户只能选择指定范围内的日期。

<template>
    <div>
        <el-date-picker v-model="productionDate" type="date" placeholder="选择出厂日期" :disabled-date="disabledDate"></el-date-picker>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        disabledDate(time) {
          return time.getTime() > Date.now(); //禁止选择今天以后的时间
          //return time.getTime() < Date.now() - 8.64e7;//禁止选择今天以前的时间
        }
      }
    }
  }
</script>

也能写成内部

<el-date-picker
	class="didian padding_le"
	v-model="formValidator.MaintainTime"
    type="date"
    :disabled-date="disabledDate"
     :picker-options="{
      disabledDate: time => {
      return time.getTime() < new Date()//只能选中明天或者以后的日期
         },
      }"
 	placeholder="选择日期"
    value-format="yyyy-MM-dd"
  ></el-date-picker>