elementUI中DateTimePicker 日期时间选择器自定义开发，固定时间段，修改时间后取当前输入作为时间段起始

清晨細雨

已于 2023-02-27 08:22:23 修改

阅读量1.6k

点赞数 1

文章标签：前端 vue elementui Powered by 金山文档

于 2023-02-23 15:21:14 首次发布

本文链接：https://blog.csdn.net/qq_16785561/article/details/129182476

版权

最近项目需求默认时间段前一天20:00 — 第二天8:00，更改日期选择后，快捷选项以更改后的时分秒范围来取值，记录一下。

组件代码：

<el-date-picker v-model="listQuery.timer" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" style="margin-right:10px;width:450px;" :default-time="['01:00:00', '08:00:00']" @change="changeTime"> </el-date-picker>

data：

data() {
      var that = this
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              var time = that.timeEXchange(start,end)
              picker.$emit('pick',time);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              var time = that.timeEXchange(start,end)
              picker.$emit('pick',time);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              var time = that.timeEXchange(start,end)
              picker.$emit('pick',time);
            }
          }]
        },
        rangeTimeB:"20:00:00",
        rangeTimeA:"08:00:00",
      }
    },

方法代码：

mounted() {
  var today = new Date();
  var yesterday = this.$basicFun.getDay(-1);
  this.listQuery.timer = this.timeEXchange(yesterday,today)
},
methods: {
  //选择时间后更新时间取值范围
  changeTime(val){
    var s1 = this.$basicFun.dataFormat(val[0],'yyyy-MM-dd hh:mm:ss')
    var s2 = this.$basicFun.dataFormat(val[1],'yyyy-MM-dd hh:mm:ss')
    this.rangeTimeB = s1.substr(11,18)
    this.rangeTimeA = s2.substr(11,18)
  },
  // 时间范围截取转换
  timeEXchange(day1,day2){
    var t1 = this.$basicFun.dataFormat(day1,'yyyy-MM-dd hh:mm:ss')
    var t2 = this.$basicFun.dataFormat(day2,'yyyy-MM-dd hh:mm:ss')
    t1 = t1.substr(0,11) + this.rangeTimeB
    t2 = t2.substr(0,11) + this.rangeTimeA
    var s1 = new Date(t1)
    var s2 = new Date(t2)
    var time = [s1,s2]
    return time
  },
}

其中this.$basicFun.dataFormat时间转换方法参照：

https://blog.csdn.net/qq_16785561/article/details/129209735?spm=1001.2014.3001.5502