Vue 过滤器 - 时间数据格式化过滤器模板 - 配合 el-date-picker 组件的使用、构造自定义时间数据格式标准化方法

以你之姓@ 2024-03-17 16:25 6阅读 0赞

## 一、vue 时间格式化过滤器模板 ##

在 vue 项目的 `main.js` 文件配置：

import router from './router'
    import store from './store'
    
    // 时间格式化过滤器
    Vue.filter('date', function (originVal) {
        
      const dt = new Date(originVal)
      const y = dt.getFullYear()
      const m = (dt.getMonth() + 1 + '').padStart(2, '0')
      const d = (dt.getDate() + '').padStart(2, '0')
    
      const hh = (dt.getHours() + '').padStart(2, '0')
      const mm = (dt.getMinutes() + '').padStart(2, '0')
      const ss = (dt.getSeconds() + '').padStart(2, '0')
      // yyyy-mm-dd hh:mm:ss
      // return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
      return `${
          y}-${
          m}-${
          d}`
    })
    
    
    new Vue({
        
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

`Test.vue` 文件演示：

<template>
    省略内容 ...
    
    <p class="timeshow">{
        {
         data.createTime | date}}</p>
    
    省略内容 ...
    </template>
    
    <script>
    省略内容 ...
    </script>

## 二、构造自定义时间数据格式方法 ##

其实和过滤器差不多的方法，只不过不是用在显示上，而是用在了时间数据的自定义格式化程序中，简单点就是数据保存这一步，但特指保存时间数据。

`getTimeformat.js` 文件演示：

export function getTimeformat(getdate) {
        
      /**
       * 获取当前时间
       */
        var newdate = new Date(getdate);
        var year = newdate.getFullYear(); //月份从0~11，所以加一
        let month = newdate.getMonth();
        console.log("month",month);
        var dateArr = [
          newdate.getMonth() + 1,
          newdate.getDate(),
          newdate.getHours(),
          newdate.getMinutes(),
          newdate.getSeconds(),
        ];
        //如果格式是MM则需要此步骤，如果是M格式则此循环注释掉
        for (var i = 0; i < dateArr.length; i++) {
        
          if (dateArr[i] >= 1 && dateArr[i] <= 9) {
        
            dateArr[i] = "0" + dateArr[i];
          }
        }
        var strDate =
          year +
          "-" +
          dateArr[0] +
          "-" +
          dateArr[1] +
          " " +
          dateArr[2] +
          ":" +
          dateArr[3] +
          ":" +
          dateArr[4];
        //此处可以拿外部的变量接收  strDate:2022-05-01 13:25:30
        //this.date = strDate;
        console.log("strDate",strDate);
      return strDate
    
    }

## 三、配合 el-date-picker 组件 ##

import {
        
      getTimeformat
    } from '../../api/tool/getTimeformat'
    
    
    // 2023-6-6 18:08:34
    this.formData.time= getTimeformat(new Date())

--------------------

## 参考链接 ##

[1. Vue格式化时间显示样式][1. Vue]

[2. toLocaleString][]

[3. new Date()日期格式处理][3. new Date]

[4. JS学习笔记——new Date()日期格式处理][4. JS_new Date]

[5. 教你一招：ELEMENT日期选择器EL-DATE-PICKER修改指定日期样式][5. _ELEMENT_EL-DATE-PICKER]

[6. new Date()日期格式标准化处理][6. new Date]

[7. 前端vue过滤器转换时间格式方式][7. _vue]

[1. Vue]: http://www.manongjc.com/detail/64-zgzxhvvrwpjamch.html
[2. toLocaleString]: https://blog.csdn.net/yigongzi/article/details/90140093
[3. new Date]: http://www.manongjc.com/detail/19-roqrixjkzujyyec.html
[4. JS_new Date]: https://blog.csdn.net/MRlaochen/article/details/121755522
[5. _ELEMENT_EL-DATE-PICKER]: https://www.freesion.com/article/9760968433/
[6. new Date]: https://codeleading.com/article/79185737007/
[7. _vue]: https://blog.csdn.net/weixin_45907672/article/details/129494778