element 日期选择控件过去时间不可选以及控制时间选择时分格式

_NIXIAKF

已于 2022-05-07 10:26:25 修改

阅读量2.1k

点赞数

文章标签： elementui vue.js javascript

于 2022-05-06 17:52:31 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_50114203/article/details/124615295

版权

本文介绍如何在Vue中实现日期范围选择器，使得当开始日期为当天时，结束日期不可选当天，而是默认为一天的最后一秒。通过设置`disabledDate`和`:default-time`属性，确保时间选择符合需求。同时，提供了安装和使用moment.js进行时间格式化的步骤，并展示了相关代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：选择某个时间段过去的时间不可选当开始日期选择今天时，时分秒默认为当前时间，结束日期的时间为一天的最后一秒（防止结束日期也选择今天）

效果图

templete

<el-date-picker
                        value-format="yyyy-MM-dd HH:mm:ss"
                        v-model.trim="date"
                        :picker-options="pickerOptions"
                        type="datetimerange"
                        :default-time="[this.$moment(new Date()).format('HH:mm:ss'),'23:59:59']"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>

注：:default-time 是设置选择日期时默认的时分秒（开始日期的时间，结束日期的时间）

this.$mount是格式化时间的插件安装之后在main.js中引入就可以在代码中调用

data

在data函数中return对应的特有的选项pickerOptions

pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now() - 8.64e7; // 如果没有后面的-8.64e7就是不可以选择今天的
        }
      },

补充：

安装moment:

npm  install  moment

main.js引用

import moment from 'moment'
Vue.prototype.$moment = moment; // 日期格式化

20225.7做补充：控制只需要时分格式不需要秒（format控制时分秒格式）