前端基础学习-时间格式化转换（精确到时分秒+改变时间后拼接时分秒）

最新推荐文章于 2024-05-14 09:39:57 发布

小夭。

最新推荐文章于 2024-05-14 09:39:57 发布

阅读量1.5k

点赞数 1

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

本文链接：https://blog.csdn.net/m0_47146037/article/details/110082790

版权

前端专栏收录该内容

56 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue.js中使用el-date-picker组件实现选择日期范围并精确到时分秒。通过在mounted钩子中设置默认值，结合dateForMat方法获取当前时间及前一月时间，并利用$set更新数据，确保页面渲染正确。同时，展示了changeDate方法处理时间选择变化时保持时分秒完整性的做法。

摘要由CSDN通过智能技术生成

有的时候对于时间选择，我们需要精确到当前的具体时间。对于el-date-picker，我们将其进行一个时间的拼接。
html

		<!-- 获取当前时间和前一个月的时间（精确到时分秒） -->
          <el-form-item label="选择日期" prop="date">
            <el-date-picker
              v-model="ruleForm.date"
              :clearable="true"
              type="daterange"
              @change="changeDate"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 100%"
            />
          </el-form-item>

在对应的地方加上一个默认一个月的时间选择的方法（我这里放在mounted）

  mounted () {
    this.dateForMat(30)
  },

    /** 获取当前时间和前一个月的时间（精确到时分秒） */
    dateForMat (count) {
      // 拼接时间
      let time1 = new Date()
      time1.setTime(time1.getTime())
      let Y1 = time1.getFullYear()
      let M1 = ((time1.getMonth() + 1) >= 10 ? (time1.getMonth() + 1) : '0' + (time1.getMonth() + 1))
      let D1 = (time1.getDate() >= 10 ? time1.getDate() : '0' + time1.getDate())
      // let timer1 = Y1 + '-' + M1 + '-' + D1 // 当前时间
      let hh1 = time1.getHours() < 10 ? '0' + time1.getHours() : time1.getHours()
      let mm1 = time1.getMinutes() < 10 ? '0' + time1.getMinutes() : time1.getMinutes()
      let ss1 = time1.getSeconds() < 10 ? '0' + time1.getSeconds() : time1.getSeconds()
      let timer1 = Y1 + '-' + M1 + '-' + D1 + ' ' + hh1 + ':' + mm1 + ':' + ss1 // 当前时间
      let time2 = new Date()
      time2.setTime(time2.getTime() - (24 * 60 * 60 * 1000 * count))
      let Y2 = time2.getFullYear()
      let M2 = ((time2.getMonth() + 1) >= 10 ? (time2.getMonth() + 1) : '0' + (time2.getMonth() + 1))
      let D2 = (time2.getDate() >= 10 ? time2.getDate() : '0' + time2.getDate())
      // let timer2 = Y2 + '-' + M2 + '-' + D2 // 之前的7天或者30天
      let hh2 = time2.getHours() < 10 ? '0' + time2.getHours() : time2.getHours()
      let mm2 = time2.getMinutes() < 10 ? '0' + time2.getMinutes() : time2.getMinutes()
      let ss2 = time2.getSeconds() < 10 ? '0' + time2.getSeconds() : time2.getSeconds()
      let timer2 = Y2 + '-' + M2 + '-' + D2 + ' ' + hh2 + ':' + mm2 + ':' + ss2 // 之前的7天或者30天
      // this.ruleForm.date = [timer2, timer1]
      this.$set(this.ruleForm, 'date', [timer2, timer1])
    },

这里注意有一个set的方法，因为直接赋值会导致一个页面无法渲染的问题，所以需要$set进行一个渲染

下面是change方法，每一次改变时间都拼接上时分秒

    /** 将日期选择框的时间也拼接上时分秒 */
    currentTimeFormat (val) {
      let time1 = new Date()
      time1.setTime(time1.getTime())
      let hh = time1.getHours() < 10 ? '0' + time1.getHours() : time1.getHours()
      let mm = time1.getMinutes() < 10 ? '0' + time1.getMinutes() : time1.getMinutes()
      let ss = time1.getSeconds() < 10 ? '0' + time1.getSeconds() : time1.getSeconds()
      let timer1 = val + ' ' + hh + ':' + mm + ':' + ss // 拼接后的时间
      // console.log(timer1, 'pingjie')
      return timer1
    },