elementUI 日期组件实现按钮前进后退

Rain羽

已于 2024-06-05 17:27:35 修改

阅读量334

点赞数

文章标签：前端

于 2022-11-21 10:29:52 首次发布

本文链接：https://blog.csdn.net/rainylf/article/details/127958417

版权

前进后退事件
在这里插入图片描述

代码片段
 if (type === 'back') {
        // 后退
        this.dateChangeTools(this.searchForm.startTimeE, 'start', 'minus')
        this.dateChangeTools(this.searchForm.endTimeE, 'end', 'minus')
      } else if (type === 'forward') {
        // 前进
        this.dateChangeTools(this.searchForm.startTimeE, 'start', 'forward')
        this.dateChangeTools(this.searchForm.endTimeE, 'end', 'forward')
      }

下面是封装的方法
在这里插入图片描述

代码片段
  dateChangeTools(data, type, tools) {
      if (type === 'start') {
        this.dateChangeQs(data, type, tools)
      } else {
        this.dateChangeQs(data, type, tools)
      }
    },

在这里插入图片描述

代码片段
   dateChangeQs(data, type, tools) {
      let date = new Date(data)
      date = date.getFullYear() + '-' +
        (date.getMonth() + 1) + '-' + // 这里加1是因为getMonth()的返回值是为0~11
        date.getDate() + ' ' +
        date.getHours() + ':' +
        date.getMinutes() + ':' +
        date.getSeconds()
      date = Date.parse(new Date(date)) / 1000 // 转换成时间戳，返回值是ms，除1000后转化成秒
      if (tools === 'minus') {
        date += (86400) * (-1) // 一天是86400秒
      } else {
        date += (86400) * 1 // 一天是86400秒
      }
      let newDate = new Date(parseInt(date) * 1000) // 把时间戳转换成日期
      var y = newDate.getFullYear()
      var m = newDate.getMonth() + 1
      var d = newDate.getDate()
      var H = newDate.getHours()
      var mm = newDate.getMinutes()
      var ss = newDate.getSeconds()
      m = m < 10 ? '0' + m : m
      d = d < 10 ? '0' + d : d
      H = H < 10 ? '0' + H : H
      mm = mm < 10 ? '0' + mm : mm
      ss = ss < 10 ? '0' + ss : ss
      data = y + '-' + m + '-' + d + ' ' + H + ':' + mm + ':' + ss
      if (type === 'start') {
        this.searchForm.startTimeE = data
      } else {
        this.searchForm.endTimeE = data
      }
    },

默认显示一天的日期
在这里插入图片描述

代码片段
   created() {
    this.searchForm.endTimeE = this.getTimeE('end')
    this.searchForm.startTimeE = this.getTimeE('start')
  },
  methods: {
    getTimeE(type) {
      var data = new Date()
      var Da = new Date(data.getTime())
      var y = Da.getFullYear()
      var m = Da.getMonth() + 1
      var d = Da.getDate()
      var H = Da.getHours()
      var mm = Da.getMinutes()
      var ss = Da.getSeconds()
      m = m < 10 ? '0' + m : m
      d = d < 10 ? '0' + d : d
      H = H < 10 ? '0' + H : H
      mm = mm < 10 ? '0' + mm : mm
      ss = ss < 10 ? '0' + ss : ss
      if (type === 'start') {
        var d1 = d - 1
        d1 = d1 < 10 ? '0' + d1 : d1
        return y + '-' + m + '-' + d1 + ' ' + H + ':' + mm + ':' + ss
      } else {
        return y + '-' + m + '-' + d + ' ' + H + ':' + mm + ':' + ss
      }
    },