vue使用el-date-picker（选择日期和时间）

梁小茹

已于 2022-11-03 14:27:03 修改

阅读量225

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-11-03 13:53:59 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46653486/article/details/127668824

vue 专栏收录该内容

28 篇文章

订阅专栏

本文介绍如何使用 Element UI 中的日期范围选择器组件，并提供了完整的代码示例。包括如何设置日期范围的选择、如何获取用户选择的日期范围等关键功能。

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

直接上代码！

<el-date-picker
          v-model="dateTimeValue"
           type="datetimerange"
           @change="dateChange"
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期">
</el-date-picker>


data() {
    return {
          dateTimeValue: []   //是一个数组
          rentBeginTime:'',//需要给传的值 开始时间
           rentEndTime: '',  //结束时间
    }
}

// 选择日期
    dateChange(val) {
        if(val) {
            this.rentBeginTime = this.getCurrentTime(val[0])
            this.rentEndTime = this.getCurrentTime(val[0])
        }else {
            this.rentBeginTime = ''
            this.rentEndTime = ''
            this.getList()
        }
    },
    //处理返回的值
    getCurrentTime(date) {
      let Y = date.getFullYear()
      let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
      let D = date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate()
      let hours = date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours()
      let minutes = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes()
      let seconds = date.getSeconds() < 10 ? ('0' + date.getSeconds()) : date.getSeconds()
      date = Y + '-' + M + '-' + D + ' ' + hours + ':' + minutes + ':' + seconds
      return date
    },