el-date-picker时间范围只能选五分钟之内

el-date-picker时间范围只能选五分钟之内

一、主要代码

javascript 复制代码
<el-date-picker
    type="datetime"
    size="small"
    value-format="yyyy-MM-dd HH:mm:ss"
    v-model="searchData.submitTimeCode"
    :editable="false"
    placeholder="选择开始日期"
    @change="changeEnddate()"
></el-date-picker>

<el-date-picker
    v-model="searchData.submitTimeCodeMin"
    type="datetime"
    size="small"
    placeholder="选择结束日期"
    value-format="yyyy-MM-dd HH:mm:ss"
    :editable="false"
    :picker-options="{
        disabledDate: time => {
            return (
                time.getTime() >
                    new Date(this.searchData.submitTimeCode).getTime() ||
                time.getTime() <
                    new Date(this.searchData.submitTimeCode).getTime() -
                        20 * 3600 * 1000
            )
        },

        selectableRange: dafaulttime,
    }"
></el-date-picker>


formatDate(data) {
  let now = new Date(data)
  var hour = now.getHours() < 10 ? '0' + now.getHours() : now.getHours()
  var minute = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()
  var second = now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds()
  return hour + ':' + minute + ':' + second
},
changeEnddate() {
  let dafaulttime = new Date(this.searchData.submitTimeCode).getTime() + 10 * 60 * 1000 //开始时间之后的五分钟时间戳
  this.dafaulttime =
      this.formatDate(new Date(this.searchData.submitTimeCode).getTime()) +
      '-' +
      this.formatDate(dafaulttime)
},

链接: https://blog.csdn.net/qq_33769914/article/details/108754228

相关推荐
invicinble18 分钟前
关于对vue的认识
javascript·vue.js·ecmascript
EF@蛐蛐堂21 分钟前
【vue】Vite 生态 5 个 “新玩具“
前端·javascript·vue.js
风之舞_yjf29 分钟前
Vue基础(29)_props配置项、ref属性
前端·vue.js
Fairy要carry1 小时前
项目03-手搓Agent之团队协作(发消息/分配任务)
linux·前端·python
东北甜妹1 小时前
Python脚本
java·开发语言·前端
四千岁1 小时前
WSL + OpenCode 最佳实践:环境一致、模型配置、GUI 远程使用
前端·javascript·后端
你挚爱的强哥1 小时前
【sgCreateQrcode】自定义组件:模仿草料二维码做了一个简单的二维码制作组件
javascript·vue.js·elementui
ssshooter1 小时前
Tauri 2 Linux 上 asset://localhost 访问返回 403 避坑指南
前端·后端·架构
半世轮回半世寻1 小时前
这 5 个 Elements 小技巧,真的能提高调试效率
前端·浏览器
kyriewen1 小时前
for...of 的秘密:迭代器与可迭代对象,你也能创造“可循环”的东西
前端·javascript·面试