element-ui el-date-picker限制日期时间选择范围

el-date-picker限制时间选择范围

实现效果:

代码

html 复制代码
<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.14/lib/index.js"></script>
<div id="app">
<template>
  <div class="block">
    <span class="demonstration">带快捷选项</span>
    <el-date-picker
      v-model="value1"
      type="datetime"
      placeholder="选择日期时间"
      align="right"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>
</div>
javascript 复制代码
var Main = {
    data() {
      return {
        value1: '',
      };
    },
    computed: {
      pickerOptions() {
        const disabledDate = (time) => {
            return time.getTime() < new Date('2025-03-06 12:00:00') || time.getTime() > new Date('2025-03-08 12:00');
          }
        return {
          disabledDate,
          selectableRange: ['10:00:00-23:59:59'],
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        }
      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
相关推荐
白日依山尽yy9 分钟前
Vue、微信小程序、Uniapp 面试题整理最新整合版
vue.js·微信小程序·uni-app
BillKu34 分钟前
Vue3数组去重方法总结
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue+JSX真香现场:告别模板语法,解锁新姿势!
前端·javascript·vue.js
摸鱼仙人~1 小时前
Vue.js 指令系统完全指南:深入理解 v- 指令
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue列表渲染的坑:为什么不能用index当key?血泪教训总结!
前端·javascript·vue.js
前端小巷子1 小时前
Vue 虚拟 DOM
前端·vue.js·面试
江城开朗的豌豆1 小时前
Vue中key的妙用:为什么你的列表渲染总出bug?
前端·javascript·vue.js
BuHuaX2 小时前
Unity_UI_NGUI_缓动
ui·unity·c#·游戏引擎·游戏策划
妮妮喔妮3 小时前
图片上传 el+node后端+数据库
javascript·数据库·vue.js
paopaokaka_luck7 小时前
婚纱摄影管理系统(发送邮箱、腾讯地图API、物流API、webSocket实时聊天、协同过滤算法、Echarts图形化分析)
vue.js·spring boot·后端·websocket·算法·echarts