element 日期组件 el-date-picker 时间设置

学不会•

已于 2024-04-11 20:12:47 修改

阅读量420

点赞数

文章标签： vue.js javascript 前端

于 2023-03-03 17:39:33 首次发布

本文链接：https://blog.csdn.net/qq_41588991/article/details/129324485

版权

1.超过当前日期，禁止点击

<template>
  <div>
    {{value1}}
    <el-date-picker v-model="value1" type="date" value-format='yyyy-MM-dd' format='yyyy-MM-dd' :picker-options="pickerOptions" placeholder="选择日期">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value1: '',
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now();
        }
      }
    }
  }
}
</script>

2.小于当前日期禁止点击

<el-form-item label="预约日期" prop="startEndTime">
          <el-date-picker v-model="form.startEndTime" type="daterange" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" :disabled="disabled" />
        </el-form-item>


 pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now() - 86400000
        }
      },

3.设置:default-time="['00:00:00', '23:59:59']"，确定按钮点不了

<template>
  <div>
    <el-date-picker v-model="time" type="datetimerange" :picker-options="pickerOptions" align="right" format='yyyy-MM-dd HH:mm:ss' value-format='yyyy-MM-dd HH:mm:ss' start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data () {
    return {
      time: '',
      startTime: '',
      endtTime: '',
      pickerOptions: {
        disabledDate (time) {
          // 到下一天
          // const start = new Date();
          // return time.getTime() > start.getTime() + 3600 * 1000 * 24

          // 解决可以点击当天
          // const startDate = new Date()
          // const endDate = new Date()
          // startDate.setHours(0, 0, 0, 0)// 开始时间：当日00：00：00：00
          // startDate.setFullYear(endDate.getFullYear() - 1)// 开始时间：去年当日00：00：00：00
          // endDate.setHours(23, 59, 59, 59) // 结束时间：当日23：59：59：59
          // return time.getTime() < startDate || time.getTime() > endDate

          //  // 解决可以点击当天
          const end = new Date(new Date().toLocaleDateString());
          end.setTime(end.getTime() + 3600 * 1000 * 24 - 1000);
          return time.getTime() > end.getTime();

        }
      }
    }
  },
  methods: {

  }
}
</script>

<style>
</style>