【Vue】日期格式化(全局)

news2025/1/10 1:04:31

系列文章

【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


文章目录

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


前言

本专栏为【Vue】,主要介绍Vue知识点。对于刚刚进入计算机世界的大学生来说,这里普及一个知识:HTML已经不仅仅只能开发 Web,也可以开发 AndroidiOS ,所以本文也会介绍 移动端开发。
我个人将安卓开发,分为两大方向:

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

②混合开发(加壳方式)
使用Web技术(网页三剑客HTML、CSS和JavaScript)开发App的方式。混合开发具有较高的开发效率和跨平台的优势,由于使用Web技术 界面渲染、不同屏幕适配(使用栅格技术)效果好。但是缺点就是对底层硬件调用库尚不完善,不过在不断完善中,常用的相机、相册、GPS、存储调用是没有问题的。

Vue是前端开发中的一个分支,学习Vue之前不可以速成,得先学会网页三剑客(HTML、CSS和JavaScript),因为Vue中依旧会使用到这些技术,Vue它不够是一种新的编程思想 组件化开发MVVM(数据双向绑定)

在这里插入图片描述

一、技术介绍

本文介绍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
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1313746.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Tomcat的结构分析和请求处理原理解析

目录 Tomcat服务器&#xff1f;Tomcat结构处理请求流程Tomcat作用其他的web服务器 Tomcat服务器&#xff1f; 我们经常开口闭口“服务器”、“服务器”的&#xff0c;其实“服务器”是个很容易引发歧义的概念 其实&#xff0c;Tomcat服务器 Web服务器 Servlet/JSP容器&#…

java简易制作-王者荣耀游戏

一.准备工作 首先创建一个新的Java项目命名为“王者荣耀”&#xff0c;并在src下创建两个包分别命名为“com.sxt"、”com.stx.beast",在相应的包中创建所需的类。 创建一个名为“img”的文件夹来储存所需的图片素材。 二.代码呈现 package com.sxt; import javax…

人工智能联盟的首件神兵利器——“Purple Llama” 项目,旨为保护工智能模型安全性

Meta公司&#xff08;Meta Platform Inc&#xff09;&#xff0c;原名Facebook&#xff0c;创立于2004年2月4日&#xff0c;市值5321.71亿美元。总部位于美国加利福尼亚州门洛帕克。 Meta 公司推出了名为“Purple Llama”的项目&#xff0c;旨在保护和加固其开源人工智能模型。…

【MODBUS】Modbus的3种传输方式

概述 1979年&#xff0c;Modicon 首先推出了串行Modbus标准&#xff0c;后来由于网络的普及&#xff0c;需要更高的传输速度&#xff0c;1997年制定了基于TCP网络的Modbus标准。 所以总的可分为两个传输模式:基于串行链路的和基于以太网TCP/IP的。但是我个人还是习惯分为3种传…

【MySQL 索引】InooDB 索引实现

1 索引定义 维基百科对数据库索引的定义: 数据库索引是数据库管理系统&#xff08;DBMS&#xff09;中的一个排序数据结构, 以协助快速查询和更新数据库表中的数据。 MongoDB对索引的定义: 索引是一种特殊的数据结构, 以有序和便于遍历的形式存储数据集合中特定字段或一组字段…

蓝桥杯专题-真题版含答案-【制作表格】【5位黑洞数】【泊松分酒】【亲密数】

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…

UG NX二次开发(C++)-库缺少需要的入口点的原因与解决方案

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 1、前言2、“库缺少需要的入口点”错误展示3、可能出现的原因与解决方案3.1 对于采用CTRL+U方式调用3.2 对于menu菜单下调用1、前言 在UG NX二次开发过程中,有时会遇到形形色色的bug,比如有个读…

可视化监控云平台/智能监控EasyCVR如何使用脚本创建ramdisk挂载并在ramdisk中临时运行

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。安防管理视频平台EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频录像、云存…

【Spring Boot】内网穿透实现远程调用调试

文章目录 1. 本地环境搭建1.1 环境参数1.2 搭建springboot服务项目 2. 内网穿透2.1 安装配置cpolar内网穿透2.1.1 windows系统2.1.2 linux系统 2.2 创建隧道映射本地端口2.3 测试公网地址 3. 固定公网地址3.1 保留一个二级子域名3.2 配置二级子域名3.2 测试使用固定公网地址 4.…

管理类联考——英语二——考点+记忆篇——大作文——表格

大作文Remarkablechangesconcerning主题词havebeenwitnessedinTheabovechartthoroughlyrevealedthefascinatingissue.Onecanseethat年份1,事物1wasonly数字1.ButwithinashortdurationofXyears,事物1bumpedto数字2in年份2.Apartfromthat,事物2hasenjoyedaslightdeclineduringthe…

基于3D-CGAN的跨模态MR脑肿瘤分割图像合成

3D CGAN BASED CROSS-MODALITY MR IMAGE SYNTHESIS FOR BRAIN TUMOR SEGMENTATION 基于3D-CGAN的跨模态MR脑肿瘤分割图像合成背景贡献实验方法Subject-specific local adaptive fusion&#xff08;针对特定主题的局部自适应融合&#xff09;Brain tumor segmentation model 损失…

外汇天眼:如果美元开始降息,会为市场带来哪些影响?

一、美元降息的影响 美元一旦开始降息&#xff0c;将对全球经济产生重要影响。 降息政策将带动美国内部的消费和投资增长。 透过降低借贷成本&#xff0c;鼓励个人和企业增加支出&#xff0c;刺激经济活动。 以最新数据为例&#xff0c;美国的消费者信心指数正在上升&#xff…

4.qml 3D-Light、DirectionalLight、PointLight、SpotLight、AxisHelper类深入学习

今天我们学习灯光类 首先来学习Light类&#xff0c;它是所有灯光的虚基类&#xff0c;该类是无法创建的&#xff0c;主要是为子类提供很多公共属性。 常用属性如下所示&#xff1a; ambientColor : color&#xff0c;该属性定义在被该光照亮之前应用于材质的环境颜色。默认值…

Halcon参考手册异常检测知识总结

1.1异常检测介绍 本章将介绍如何使用基于深度学习的异常检测和全局上下文异常检测。通过这两种方法&#xff0c;我们想要检测图像是否包含异常(异常是指偏离正常的事物&#xff0c;未知的事物)。 异常检测或全局上下文异常检测模型学习无异常图像的共同特征。经过训练的模型将…

CentOS7 OpenSSL升级到OpenSSH9.5p1

原文链接&#xff1a; CentOS7 OpenSSL升级1.1.1w&#xff1b;OpenSSH 升级 9.5p1 保姆级教程 openssl从3.1.0升级到3.1.1遇到的问题 注意操作时需要联网请参考如下链接 内网服务器联网安装依赖参见我的另一篇文章 一、 前言 OpenSSH 的加密功能需要用到OpenSSL&#xff0c;所…

STM32-UART-DMA HAL库缓冲收发

文章目录 1、说明1.1、注意事项&#xff1a;1.2、接收部分1.3、发送部分 2、代码2.1、初始化2.2、缓冲接收2.3、缓冲发送2.4、格式化打印 1、说明 1.1、注意事项&#xff1a; HAL库的DMA底层基本都会默认开启中断使能&#xff0c;如果在STM32CubeMx禁用了中断相关的功能&…

基于ssm企业人事管理系统的设计与实现论文

摘 要 进入信息时代以来&#xff0c;很多数据都需要配套软件协助处理&#xff0c;这样可以解决传统方式带来的管理困扰。比如耗时长&#xff0c;成本高&#xff0c;维护数据困难&#xff0c;数据易丢失等缺点。本次使用数据库工具MySQL和编程技术SSM开发的企业人事管理系统&am…

人工智能与天文:技术前沿与未来展望

人工智能与天文&#xff1a;技术前沿与未来展望 一、引言 随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;在各个领域的应用越来越广泛。在天文领域&#xff0c;AI也发挥着越来越重要的作用。本文将探讨人工智能与天文学的结合&#xff0c;以及这种结合带…

动态规划习题

动态规划的核心思想是利用子问题的解来构建整个问题的解。为此&#xff0c;我们通常使用一个表格或数组来存储子问题的解&#xff0c;以便在需要时进行查找和使用。 1.最大字段和 #include <iostream> using namespace std; #define M 200000int main() {int n, a[M], d…

STM32 寄存器配置笔记——I2C 读写AT24C02 EEPROM

一、简介 本文主要介绍STM32F10xx系列如何使用软件模拟I2C总线读写AT24C02的EEPROM数据。 二、概述 I2C协议是一种用于同步、半双工、串行总线(由单片机时钟线、单数据交换器数据线组成)上的协议。规定了总线空闲状态、起始条件、停止条件、数据有效性、字节格式、响应确认信号…