菜单 搜索
首页 前端知识 【Vue】全局日期格式化

【Vue】全局日期格式化

2024-06-06 10:06:32 前端知识 前端哥 298 181 我要收藏

系列文章

【Vue】vue增加导航标签
本文链接：https://blog.csdn.net/youcheng_ge/article/details/134965353

【Vue】Element开发笔记
本文链接：https://blog.csdn.net/youcheng_ge/article/details/133947977

【Vue】vue，在Windows IIS平台部署
本文链接：https://blog.csdn.net/youcheng_ge/article/details/133859117

【Vue】vue2与WebApi跨域CORS问题
本文链接：https://blog.csdn.net/youcheng_ge/article/details/133808959

【Vue】nvm安装教程（解决npm下依赖包版本冲突）
本文链接：https://blog.csdn.net/youcheng_ge/article/details/132896207

【Vue】vue开发环境搭建教程（详细）
本文链接：https://blog.csdn.net/youcheng_ge/article/details/132689006

【Vue】日期格式化（全局）
本文链接：https://blog.csdn.net/youcheng_ge/article/details/135017332

【Vue】elementUI表格，导出Excel
本文链接：https://blog.csdn.net/youcheng_ge/article/details/135018489

【Vue】el-date-picker日期范围组件（本周、本月、上周）
本文链接：https://blog.csdn.net/youcheng_ge/article/details/135088143

【前端】前后端通信方法与差异
本文链接：https://blog.csdn.net/youcheng_ge/article/details/135153985

文章目录

  • 系列文章
  • 前言
  • 一、技术介绍
  • 二、项目源码
    • 2.1 原parseTime函数（不推荐）
    • 2.2 formatDate函数
    • 2.3 filters过滤器添加引入
    • 2.4 main.js过滤器全局注册
    • 2.5 日期格式化使用
  • 三、效果展示
  • 四、资源链接

前言

本专栏为 前端【Vue】专栏，主要介绍Vue知识点。对于刚进入计算机世界的学生来说，学习课本上的知识是远远不够的，并且国内教材偏旧，所以需要我们通过互联网自主学习。
这里普及一个知识：HTML已不仅仅只能开发 Web，也可以开发移动端（Android、iOS），所以本专栏也会介绍 移动端的开发。
我个人将移动端开发，分为两大方向：

①原生开发
最早一批，使用安卓开发工具包（Android SDK）和Java语言来开发App的方式。原生开发允许开发者充分利用安卓平台的功能和特性，以及庞大的安卓开发社区资源。但缺点就是门槛高、需要适配不同尺寸的屏幕、测试繁琐，对开发人员技术要求高。

②混合开发（加壳方式）
当前热门，使用Web技术（网页三剑客HTML、CSS和JavaScript）开发App的方式，使用 vue.js、node.js、Angular.js、React.js、api.js等框架开发。混合开发具有较高的开发效率和跨平台的优势，由于使用Web技术进行 界面渲染样式丰富、屏幕适配（栅格技术自适应）效果好。但缺点就是对底层硬件调用库尚不完善，有时候会发生异常，对框架依赖较高，不过库在不断完善中，主要的相机、相册、GPS、存储调用是没有问题的。

Vue是前端开发中的一个分支，它基于标准 HTML、CSS 和 JavaScript 构建，学习Vue不可以速成，得先熟悉网页三剑客（HTML、CSS和JavaScript）。Vue是一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。
在这里插入图片描述

一、技术介绍

本文介绍Vue或者说前端吧，日期格式化。原日期为调制时间不方便阅读，我们希望转换成 yyyy-MM-dd hh:mm:ss 这种形式。
在这里插入图片描述
如上图所示，2023-12-11T18:51:32 这种日期很奇怪，为了兼容Excel文档日期格式啊，我们需要进行转换成 2023-12-11 18:51:32。

经过我的测试，官网提供的parseTime()函数不能够满足要求，本文将自己写一个函数，并且全局可以调用。

二、项目源码

2.1 原parseTime函数（不推荐）

位置：src\utils\index.js
代码：略，模板里面自带
在这里插入图片描述
测试代码：

<el-table-column prop="领用时间" :show-overflow-tooltip="true" align="left" label="领用时间">
  <template slot-scope="scope">
    <span>{{ scope.row.领用时间 | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
  </template>
</el-table-column>

在这里插入图片描述
转换失败，具体原因我没有查，我分析可能和我的数据源有关，我这数据源后台过来 DataTable，不是传统的list。 很不专业，我上司非要用DataTable好，我没办法一切兼容他。

其次，我个人觉得，官方提供的 parseTime() 也不是我想要的，故而本文进行自定义开发。

2.2 formatDate函数

在 utils 下，创建gyc.js。

位置：src\utils\gyc.js
代码：

// 表格格式化日期
export function formatDate(date, fmt) {
  date = new Date(date);
  if (typeof(fmt) === "undefined") {
      fmt = "yyyy-MM-dd hh:mm:ss";
  }
  if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
  }
  let o = {
      'M+': date.getMonth() + 1,
      'd+': date.getDate(),
      'h+': date.getHours(),
      'm+': date.getMinutes(),
      's+': date.getSeconds()
  }
  for (let k in o) {
      if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + ''
          fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : ('00' + str).substr(str.length));
      }
  }
  return fmt
}

2.3 filters过滤器添加引入

就是一行代码，把2.2节创建的文件，引入进来。这里我这么做，主要还是为了代码看起来简洁，你也可以直接在 main.js 中全局引用。

位置：src\filters\index.js
代码：export { formatDate } from ‘@/utils/gyc’

在这里插入图片描述

2.4 main.js过滤器全局注册

这里就是全局注册了，我们分视图都可以反问到它，不要每次都引入。

位置：src\main.js
代码：

import * as filters from './filters' // 全局过滤器

// 注册全局过滤器（日期时间）
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

在这里插入图片描述

2.5 日期格式化使用

位置：自己页面的位置
代码：
formatDate()为自己定义的函数，就是 2.2节内容。
parseTime()为官方提供的函数，就是 src\utils\index.js。

<el-table-column prop="领用时间" :show-overflow-tooltip="true" align="left" label="领用时间">
  <template slot-scope="scope">
    <!-- <span>{{ scope.row.领用时间 | parseTime('{y}-{m}-{d} {h}:{i}') }}</span> -->
    <span>{{ scope.row.领用时间 | formatDate('yyyy-MM-dd hh:mm:ss') }}</span>
  </template>
</el-table-column>

三、效果展示

红色方框所示，已经显示正常了，其中日期格式自己也可以定义的，yyyy-MM-dd hh:mm:ss 日期学编程的应该都懂的。
在这里插入图片描述

四、资源链接

gyc.js

/**
 * @desc 自定义通用方法
 * @author gyc
 * @date 2023-11-23
 * @note 
 */

const baseURL = process.env.VUE_APP_BASE_API

// 表格格式化日期
export function formatDate(date, fmt) {
  date = new Date(date);
  if (typeof(fmt) === "undefined") {
      fmt = "yyyy-MM-dd hh:mm:ss";
  }
  if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
  }
  let o = {
      'M+': date.getMonth() + 1,
      'd+': date.getDate(),
      'h+': date.getHours(),
      'm+': date.getMinutes(),
      's+': date.getSeconds()
  }
  for (let k in o) {
      if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + ''
          fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : ('00' + str).substr(str.length));
      }
  }
  return fmt
}


// 表单重置
export function resetForm(refName) {
  if (this.$refs[refName]) {
    this.$refs[refName].resetFields()
  }
}

/**
 * 添加日期范围
 * @param { beginTime: '', endTime: '', page: 1} params
 * @param {*} dateRange 日期范围数组
 * @param {*} propName C#属性名首字母大写
 * @returns
 */
// 添加日期范围
export function addDateRange(params, dateRange, propName) {
  let search = params
  search = typeof search === 'object' && search !== null && !Array.isArray(search) ? search : {}
  dateRange = Array.isArray(dateRange) ? dateRange : []
  if (typeof propName === 'undefined') {
    search['beginTime'] = dateRange[0]
    search['endTime'] = dateRange[1]
  } else {
    search['begin' + propName] = dateRange[0]
    search['end' + propName] = dateRange[1]
  }
  return search
}

export function addDateRange2(dateRange, index) {
  var time = undefined
  if (null != dateRange && '' != dateRange) {
    if (dateRange.length <= 2) {
      time = dateRange[index]
    }
  }
  return time
}

// 回显数据字典
export function selectDictLabel(datas, value) {
  if (value === undefined) {
    return ''
  }
  var actions = []
  Object.keys(datas).some((key) => {
    if (datas[key].dictValue == '' + value) {
      actions.push(datas[key].dictLabel)
      return true
    }
  })
  if (actions.length === 0) {
    actions.push(value)
  }
  return actions.join('')
}

// 回显数据字典（字符串数组）
export function selectDictLabels(datas, value, separator) {
  if (value === undefined) {
    return ''
  }
  var actions = []
  var currentSeparator = undefined === separator ? ',' : separator
  var temp = value.split(currentSeparator)
  Object.keys(value.split(currentSeparator)).some((val) => {
    var match = false
    Object.keys(datas).some((key) => {
      if (datas[key].value == '' + temp[val]) {
        actions.push(datas[key].label + currentSeparator)
        match = true
      }
    })
    if (!match) {
      actions.push(temp[val] + currentSeparator)
    }
  })
  return actions.join('').substring(0, actions.join('').length - 1)
}

// table是否显示当前列
export function showColumn(columns, value) {
  columns.filter((item, index) => {
    // console.log(item);
    return item.key == value
  })
}

// 通用下载方法
export function download(url, fileName) {
  // window.location.href = baseURL + "/common/download?fileName=" + encodeURI(fileName) + "&delete=" + true;
  // window.open(baseURL + "/common/download?fileName=" + encodeURI(fileName) + "&delete=" + true)
  window.open(baseURL + url)
}

// 字符串格式化(%s )
export function sprintf(str) {
  var args = arguments,
    flag = true,
    i = 1
  str = str.replace(/%s/g, function () {
    var arg = args[i++]
    if (typeof arg === 'undefined') {
      flag = false
      return ''
    }
    return arg
  })
  return flag ? str : ''
}

// 转换字符串，undefined,null等转化为""
export function praseStrEmpty(str) {
  if (!str || str == 'undefined' || str == 'null') {
    return ''
  }
  return str
}
export function praseStrZero(str) {
  if (!str || str == 'undefined' || str == 'null') {
    console.log('zero')
    return 0
  }
  return str
}
/**
 * 构造树型结构数据
 * @param {*} data 数据源
 * @param {*} id id字段 默认 'id'
 * @param {*} parentId 父节点字段 默认 'parentId'
 * @param {*} children 孩子节点字段 默认 'children'
 * @param {*} rootId 根Id 默认 0
 */
export function handleTree(data, id, parentId, children) {
  let config = {
    id: id || 'id',
    parentId: parentId || 'parentId',
    childrenList: children || 'children',
  }

  var childrenListMap = {}
  var nodeIds = {}
  var tree = []

  for (let d of data) {
    let parentId = d[config.parentId]
    if (childrenListMap[parentId] == null) {
      childrenListMap[parentId] = []
    }
    nodeIds[d[config.id]] = d
    childrenListMap[parentId].push(d)
  }

  for (let d of data) {
    let parentId = d[config.parentId]
    if (nodeIds[parentId] == null) {
      tree.push(d)
    }
  }

  for (let t of tree) {
    adaptToChildrenList(t)
  }

  function adaptToChildrenList(o) {
    if (childrenListMap[o[config.id]] !== null) {
      o[config.childrenList] = childrenListMap[o[config.id]]
    }
    if (o[config.childrenList]) {
      for (let c of o[config.childrenList]) {
        adaptToChildrenList(c)
      }
    }
  }
  return tree
}

/**
 * 构造自定义字典数据
 * @param {*} data 数据源
 * @param {*} lableId id字段 默认 'lableId'
 * @param {*} labelName 名称 默认 'labelName'
 */
export function handleDict(data, lableId, labelName) {
  lableId = lableId || 'id'
  labelName = labelName || 'name'
  //循环所有项
  var dictList = []
  if (!Array.isArray(data)) {
    return []
  }
  data.forEach((element) => {
    dictList.push({
      dictLabel: element[labelName],
      dictValue: element[lableId].toString(),
    })
  })
  return dictList
}

// 验证是否为blob格式
export async function blobValidate(data) {
  try {
    const text = await data.text()
    JSON.parse(text)
    return false
  } catch (error) {
    return true
  }
}
转载请注明出处或者链接地址：https://www.qianduange.cn//article/11088.html
标签
日期格式化formatDate
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

设计出一个较为完整的网页，网页内容是图书购买系统，包含四个页面，第一个页面登录页面（ login . jsp )，含有用户名（用户名为你名字的首字母缩写）和密码；第二个页面（ success . jsp ）是登录成功之后跳转到图书系统首页，在首页的第一行写：欢迎您 XXX （其中 XXX 指的是登录成功的用户名），这个页面的下方是一个表单显示图书的信息（包含书名、价格和作者）；第三个页面（ details . jsp ）是将用户选中的图书详情跳转，（例如第二个页面用户选择《活着》，第三个页面即将展示《活着

2024-06-12 01:06:29

SQLite数据库中JSON 函数和运算符(二十七)

2024-06-11 09:06:39

nlohmann json：通过items遍历object/array

2024-06-11 09:06:39

Labelme做数据标签、批量处理json文件转换为png方法_labelme json文件转换(1)

2024-06-11 09:06:32

【Python基础】文件详解（文件基础、csv文件、时间处理、目录处理、excel文件、json&picke、ini配置文件）

2024-06-11 09:06:30

FastJson中JSONString与各个对象的的转换关系及API示例

2024-06-11 09:06:23

浅谈 JSON 对象和 FormData 相互转换，打通前端与后端的通信血脉

2024-06-11 09:06:16

【ArcGIS微课1000例】0080：ArcGIS将shp转json(geojson)案例教程

2024-06-11 09:06:16

Jackson之ObjectMapper常用用法

2024-06-11 09:06:16

【浏览器报错解决记录】SyntaxError: Unexpected non-whitespace character after JSON at position 7

2024-06-11 09:06:14

大家推荐的文章
1

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
2

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
3

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
4

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
5

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
6

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
7

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
8

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
9

UE4.27支持HTML5

2024-05-07 13:05:261000
10

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！