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

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

实现效果:

代码

html 复制代码
<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/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')
相关推荐
银色的白3 小时前
工作记录:人物对话功能开发与集成
vue.js·学习·前端框架
应巅3 小时前
echarts 数据大屏(无UI设计 极简洁版)
前端·ui·echarts
萌萌哒草头将军3 小时前
🚀🚀🚀什么?浏览器也能修改项目源文件了?Chrome 团队开源的超强 Vite 插件!🚀🚀🚀
vue.js·react.js·vite
Shimeng_19897 小时前
前端如何通过(手机)扫描二维码下载app
前端·javascript·vue.js·二维码·扫描二维码下载软件app
MZWeiei8 小时前
MVVM 模式,以及 Angular、React、Vue 和 jQuery 的区别与关系
vue.js·react.js·angular.js
述雾学java8 小时前
Spring Boot + Vue 前后端分离项目解决跨域问题详解
vue.js·spring boot·后端
空城机9 小时前
从零打造前沿Web聊天室:消息系统
前端·vue.js
燕燕燕燕燕9 小时前
vue2基础-vue基础知识和原理
vue.js
用户3802258598249 小时前
vue中结合vue3-sfc-loader加载远程组件
vue.js
Jinxiansen02119 小时前
Nuxt + Pinia + Element Plus 后台管理系统搭建教程(含源码)
前端·javascript·vue.js