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

相关推荐
lichong9512 分钟前
XLog debug 开启打印日志,release 关闭打印日志
android·java·前端
烟袅21 分钟前
作用域链 × 闭包:三段代码,看懂 JavaScript 的套娃人生
前端·javascript
风止何安啊40 分钟前
收到字节的短信:Trae SOLO上线了?尝尝鲜,浅浅做个音乐播放器
前端·html·trae
抱琴_1 小时前
大屏性能优化终极方案:请求合并+智能缓存双剑合璧
前端·javascript
用户463989754321 小时前
Harmony os——长时任务(Continuous Task,ArkTS)
前端
fruge1 小时前
低版本浏览器兼容方案:IE11 适配 ES6 语法与 CSS 新特性
前端·css·es6
颜酱1 小时前
开发工具链-构建、测试、代码质量校验常用包的比较
前端·javascript·node.js
颜酱2 小时前
package.json 配置指南
前端·javascript·node.js
todoitbo2 小时前
基于 DevUI MateChat 搭建前端编程学习智能助手:从痛点到解决方案
前端·学习·ai·状态模式·devui·matechat
oden2 小时前
SEO听不懂?看完这篇你明天就能优化网站了
前端