el-date-picker 限制固定开始时间与结束日期,用户只能在此范围内选择

2023-10-27

今天拿到的需求是,开始时间与结束时间是固定的,用户只能在这个范围内选择,为了用户体验好点,我选择了把不能选的日期直接置灰这种实现效果。

效果如下:能清楚的看到 2023-01-04 之前的日期都不能选择

当前时间限制 开始范围是2023-01-01 00:00  截至时间是2023-02-28 00:00

代码如下: 

<template>
 <div>
  // ....此处省略其余代码
       <el-form-item label="任务截至时间" prop="startTime">
            <el-date-picker
              :disabled="hasTime"
              value-format="yyyy-MM-dd HH:mm"
              format="yyyy-MM-dd HH:mm"
              v-model="form.startTime"
              @change="changeTime"
              type="datetime"
              :picker-options="startTimePicker"
              placeholder="请选择开始日期"
            >
            </el-date-picker>
          </el-form-item>
 </div>
</template>

<srcipt>
 export defalut {
    data() {
      return {
        startTimePicker: {
          disabledDate: time => {
            // 这个dateTime 是拿到的时间范围值
             const [start, end] = this.dateTime
             const timer = new Date(time).getTime()
             return timer < new Date(start) || timer > new Date(end)
           }
         },
         form: {
           startTime: ''
          },
         dateTime: []
       }
     }
}
}
</script>

很怕大家看不明白我写的 尽量想写的再详细点


看了的话点个赞再走吧~~~

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

el-date-picker 限制固定开始时间与结束日期,用户只能在此范围内选择 的相关文章

随机推荐

  • 物联网LoRa系列-22:LoRa终端--射频芯片SX1261 SX1262的LoRa专用调制解调器与配置

    目录结构 1 SX1261 2功能模块 2 调制技术的基本原理 3 LoRa调制解调的介绍 4 LoRa调制解调的寄存器设置 1 SX1261 2功能模块 MCU与SX1261 2物理上通过两组接口进行通信 1 SPI总线 2 GPIO中断
  • 微信小程序webview清除缓存、微信公众号h5清除缓存、页面白屏、空白、不刷新问题

    一 缓存带来的问题和原因 我们在发布新版本的时候 在打开微信小程序webview嵌套的h5页面或微信公众号h5页面时 常常会发现页面还是上个版本的旧页面或者打开直接空白 白屏了 那么为什么会存在这个问题呢 原因是微信浏览器为了提高性能 自带
  • 让玩家移动到鼠标点击的位置

    bool finish true Vector3 pos public int speed 10 void Start void Update if Input GetMouseButtonDown 0 Ray ray Camera mai
  • 不要做”积极废人”

    确切的说 我算是一个积极废人 最近对我来说有几个思想上大的进步 虽然看起来很简单 但是能够彻底的接受和全新接受 还是需要一些时间的 第一个是对于RESTful的思想 从最近的一些实践和使用情况来看 对系统的设计和模块间轻耦合是有很大的帮助的
  • lab2

    Part1 Exercise 1 boot alloc if n result nextfree return result else uint32 t remainingPages npages uint32 t nextfree uin
  • 常见Web安全漏洞

    常见Web安全漏洞 1 越权漏洞 不同权限账户之间的存在越权访问 检测 抓去a用户功能链接 然后登录b用户对此链接进行访问 抓去a用户功能链接 修改id为b的id 查看是否能看b的相关数据 替换不同的cookie进行测试查看 防范 1服务器
  • gin框架29--自定义验证器

    gin框架29 自定义验证器 介绍 案例 说明 介绍 本文介绍了如何在gin框架中自定义验证器 并加以案例说明 案例 源码 package main import net http time github com gin gonic gin
  • JetBrains:推出“新一代 IDE ”!VS Code 对手来了

    近期 JetBrains 在官方博客宣布 推出一款有点不一样的轻量级编辑器 Fleet 并称其为 下一代 IDE 官方地址 https www jetbrains com zh cn fleet 官网介绍中说明 以 20 年的 IDE 开发
  • flink-python的安装

    一 下载flink flink flink python at master apache flink GitHub 二 安装pyflink yum install maven 安装maven 3 1 1以上版本 https ci apac
  • 小程序授权登陆流程

    小程序授权登陆流程 1 当用户进入微信小程序时 首先我们先判断用户是否授权过此小程序 wx getSetting wx getSetting方法获取用户的当前设置 查看是否授权 sucsess res gt 调用成功的回调函数 if res
  • 影视剪辑,PR剪辑软件两个转场教程

    一 古风渐变擦除转场 拖入视频1和视频2 将视频2放到视频1上面的轨道 2者重叠部分就是转场部分 效果 渐变擦除 拖到视频2 在开头K关键帧 效果控件 渐变擦除 过渡完成 K帧调到100 在2段视频交接处 K帧 过渡完成调到0 为了使效果更
  • 数据中台-让数据用起来-8

    文章目录 第八章 数据资产管理 8 1 数据资产的定义和3个特征 8 2 数字资产管理现状和调整 8 3 数据资产管理的4个目标 8 4 数据资产管理在数据中台架构中的位置 8 5 数据治理 8 5 1 数据治理的6个目标 8 5 2 数据
  • 【无人机路径规划】基于IRM和RRTstar进行无人机路径规划(Matlab代码实现)

    欢迎来到本博客 博主优势 博客内容尽量做到思维缜密 逻辑清晰 为了方便读者 座右铭 行百里者 半于九十 本文目录如下 目录 1 概述 2 运行结果 3 参考文献 4 Matlab代码 文章详细讲解 1 概述 本文将无人机路径规划这一非线性规
  • 2021年最新,解决xgboost安装问题:xgboost.core.XGBoostError: XGBoost Library (xgboost.dll) could not be loaded.

    1 环境 python 3 7版本 64位的 原来 python3 8版本的安装不了 平台不支持 2 直接pip3 install xgboost 3 然后有出错提示xgboost core XGBoostError XGBoost Lib
  • 2020-09-26

    package main 本文通过golang 实现msgpack字节流 参见 https github com hashicorp memberlist git util go decode encode import bytes fmt
  • 打印准考证服务器异常显示,注意了!打印准考证时,你可能遇到这些问题!

    原标题 注意了 打印准考证时 你可能遇到这些问题 2019年研究生准考证下载打印开放时间为 12月14日 12月24日 考生们一定要留心 不要错过打印时间 准考证打印流程 第一步 登录中国研究生招生信息网 并填写用户名和密码 第二步 登录完
  • Docker启动提示:Cannot connect to the Docker daemon...

    执行docker image导入时 提示 Cannot connect to the Docker daemon at unix var run docker sock Is the docker daemon running 执行dock
  • 实战:如何修改vscode作为git默认的编辑器-20211108

    目录 文章目录 目录 实验环境 实验软件 无 1 问题 如何修改vscode作为git默认的编辑器 2 配置方法 1 查看当前环境 2 开始配置 3 验证 关于我 最后 实验环境 win10 git version 2 17 0 windo
  • 硬盘的读写原理

    硬盘的种类主要是SCSI IDE 以及现在流行的SATA等 任何一种硬盘的生产都要一定的标准 随着相应的标准的升级 硬盘生产技术也在升级 比如 SCSI标准已经经历了SCSI 1 SCSI 2 SCSI 3 其中目前咱们经常在服务器网站看到
  • el-date-picker 限制固定开始时间与结束日期,用户只能在此范围内选择

    今天拿到的需求是 开始时间与结束时间是固定的 用户只能在这个范围内选择 为了用户体验好点 我选择了把不能选的日期直接置灰这种实现效果 效果如下 能清楚的看到 2023 01 04 之前的日期都不能选择 当前时间限制 开始范围是2023 01