Vue3+vite搭建基础架构（3）--- 使用dayjs

news2025/2/25 9:28:06

Vue3+vite搭建基础架构（3）--- 使用dayjs

  • 说明
  • 官方文档
  • vite.config.js别名配置
  • 安装dayjs
    • 安装命令
  • 使用dayjs
    • 将dayjs封装为自己的日期工具类
    • 使用dataUtil.js日期工具类示例

说明

这里记录下自己在Vue3+vite的项目使用dayjs的过程，不使用ts语法，方便以后直接使用。这里承接自己的博客Vue3+vite搭建基础架构（2）— 使用Element Plus这篇博客，在该博客项目的基础上增加使用dayjs。

官方文档

dayjs官方文档：https://day.js.org/docs/zh-CN/installation/node-js

vite.config.js别名配置

增加这个配置是为了后面引用工具类的时候，可以直接用@符号代替相对路径来找文件，这里@符号表示src文件夹。
在这里插入图片描述
代码如下:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//引入path用于写别名配置,自带无须安装
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    //别名配置
    alias: {
      '~': path.resolve(__dirname, './'),
      '@': path.resolve(__dirname, 'src')
    },
    //引入文件的时候，可以忽略掉以下文件后缀
    extensions: ['.js', '.mjs', '.vue', '.json', '.less', '.css']
  }
})

安装dayjs

根据官网给的命令
在这里插入图片描述

安装命令

npm install dayjs --save

在webstorm里面的Terminal输入npm install dayjs --save命令安装该依赖。执行完如下:
在这里插入图片描述
package.json会增加dayjs版本号
在这里插入图片描述

使用dayjs

在main.js文件里面引入dayjs如下:
在这里插入图片描述
main.js代码：

import { createApp } from 'vue'
//引入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//将element-plus里面默认语言英文改为中文,需要引入它
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
//引入dayjs日期插件
import dayjs from 'dayjs'
import './style.css'
import App from './App.vue'

const app = createApp(App)
//使用element-plus,并设置语言为中文
app.use(ElementPlus, {
  locale: zhCn,
})
//通过provide全局注入工具函数
app.provide('$dayjs', dayjs)
app.mount('#app')

在App.vue测试使用dayjs如下：
在这里插入图片描述

App.vue代码如下:

<script setup>
  import {ref, inject, onMounted} from 'vue'

  //日期变量,使用ref进行双向绑定
  const dateValue = ref('')
  //获取日期变量值,需要加.value来获取值
  console.info("dateValue=",dateValue.value)

  //onMounted页面初始化完成后执行
  onMounted(()=>{
    //获取在main.js里面使用provide全局注册的函数
    const dayjs=inject('$dayjs')
    //使用dayjs将当前时间转换为指定样式
    console.log("dayjs=",dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'))
  })

</script>

<template>
  <el-button type="primary">Primary</el-button>
  <el-button type="success">Success</el-button>

  <!--日期选择器-->
  <el-date-picker
      v-model="dateValue"
      type="date"
      placeholder="请选择一天"
  />
</template>

<style scoped>

</style>

浏览器效果:
控制台成功获取到当前时间
在这里插入图片描述

将dayjs封装为自己的日期工具类

在src目录下新建一个utils工具类文件夹，创建一个dateUtil.js文件。
在这里插入图片描述
dateUtil.js工具类代码如下:

//日期工具类
import dayjs from 'dayjs'

/**
 * 校检日期格式是否为YYYY-MM-DD这种格式
 * @param date
 * @returns {boolean}
 */
export function isValidDate(date) {
  return dayjs(date,"YYYY-MM-DD",true).isValid()
}

/**
 * 校检日期格式是否为YYYY-MM-DD HH:mm:ss这种格式
 * @param date
 * @returns {boolean}
 */
export function isValidDateTime(date) {
  return dayjs(date,"YYYY-MM-DD HH:mm:ss",true).isValid()
}

/**
 * 获取当前日期年月日,时间格式为YYYY-MM-DD
 * @returns {string}
 */
export function getCurrentDate() {
  return dayjs(new Date()).format("YYYY-MM-DD")
}

/**
 * 获取当前日期年月日时分秒,时间格式为YYYY-MM-DD HH:mm:ss(24小时制,如果hh为小写表示为12小时制)
 * @returns {string}
 */
export function getCurrentDateTime() {
  return dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss")
}

/**
 * 将传过来的日期转换为YYYY-MM-DD这种格式
 * @param date:为传过来的日期
 * @returns {string}
 */
export function getConvertDate(date) {
  return dayjs(date).format("YYYY-MM-DD")
}

/**
 * 将传过来的日期转换为YYYY-MM-DD HH:mm:ss这种格式
 * @param date:为传过来的日期
 * @returns {string}
 */
export function getConvertDateTime(date) {
  return dayjs(date).format("YYYY-MM-DD HH:mm:ss")
}

/**
 * 将传过来的日期加X日期且时间格式为YYYY-MM-DD这种格式,如:getXAfterDate('2023-11-11',1,'day'),结果为2023-11-12
 * @param date:为传过来的日期
 * @param num:在当前日期加num,类型为int
 * @param dateType:为要加的日期类型,有如下类型:'minute','hour','day','week','month','year'这六种类型
 * @returns {string}
 */
export function getXAfterDate(date,num,dateType) {
  return dayjs(date).add(num,dateType).format("YYYY-MM-DD")
}

/**
 * 将传过来的日期加X日期且时间格式为YYYY-MM-DD HH:mm:ss这种格式,如:getXAfterDateTime('2023-11-11 10:23:45',1,'day'),结果为2023-11-12 10:23:45
 * @param date:为传过来的日期
 * @param num:在当前日期加num,类型为int
 * @param dateType:为要加的日期类型,有如下类型:'minute','hour','day','week','month','year'这六种类型
 * @returns {string}
 */
export function getXAfterDateTime(date,num,dateType) {
  return dayjs(date).add(num,dateType).format("YYYY-MM-DD HH:mm:ss")
}

/**
 * 将传过来的日期减去X日期且时间格式为YYYY-MM-DD这种格式,如:getXBeforeDate('2023-11-11',1,'day'),结果为2023-11-10
 * @param date:为传过来的日期
 * @param num:在当前日期加num,类型为int
 * @param dateType:为要加的日期类型,有如下类型:'minute','hour','day','week','month','year'这六种类型
 * @returns {string}
 */
export function getXBeforeDate(date,num,dateType) {
  return dayjs(date).subtract(num,dateType).format("YYYY-MM-DD")
}

/**
 * 将传过来的日期减去X日期且时间格式为YYYY-MM-DD HH:mm:ss这种格式,如:getXBeforeDateTime('2023-11-11 10:23:45',1,'day'),结果为2023-11-10 10:23:45
 * @param date:为传过来的日期
 * @param num:在当前日期加day,类型为int
 * @param dateType:为要加的日期类型,有如下类型:'minute','hour','day','week','month','year'这六种类型
 * @returns {string}
 */
export function getXBeforeDateTime(date,num,dateType) {
  return dayjs(date).subtract(num,dateType).format("YYYY-MM-DD HH:mm:ss")
}

/**
 * 计算2个日期之间的差值
 * @param startDate:开始日期
 * @param endDate:结束日期,结束日期要比开始日期大
 * @param dateType:日期类型,有如下类型:'minute','hour','day','week','month','year'这六种类型
 * @returns {number}
 */
export function getDateDiff(startDate,endDate,dateType) {
  return dayjs(endDate).diff(dayjs(startDate),dateType)
}

/**
 * 判断date1是否在date2之前,比如:date1:2023-01-01 13:30:23,date2:2022-12-01 13:30:23,结果为false
 * @param date1
 * @param date2
 * @returns {boolean}
 */
export function isBefore(date1,date2) {
  return dayjs(date1).isBefore(dayjs(date2))
}

/**
 * 判断date1是否在date2之后,比如:date1:2023-01-01 13:30:23,date2:2022-12-01 13:30:23,结果为true
 * @param date1
 * @param date2
 * @returns {boolean}
 */
export function isAfter(date1,date2) {
  return dayjs(date1).isAfter(dayjs(date2))
}

/**
 * 判断date1是否与date2相同,比如:date1:2023-01-01 13:30:23,date2:2022-12-01 13:30:23,结果为false
 * @param date1
 * @param date2
 * @returns {boolean}
 */
export function isSame(date1,date2) {
  return dayjs(date1).isSame(dayjs(date2))
}

/**
 * 判断date1是否等于或者在date2之前,比如:date1:2023-01-01 13:30:23,date2:2022-12-01 13:30:23,结果为false
 * @param date1
 * @param date2
 * @returns {boolean}
 */
export function isSameOrBefore(date1,date2) {
  return dayjs(date1).isSameOrBefore(dayjs(date2))
}

/**
 * 判断date1是否等于或者在date2之后,比如:date1:2023-01-01 13:30:23,date2:2022-12-01 13:30:23,结果为true
 * @param date1
 * @param date2
 * @returns {boolean}
 */
export function isSameOrAfter(date1,date2) {
  return dayjs(date1).isSameOrAfter(dayjs(date2))
}

/**
 * 判断betweenDate日期是否在startDate开始日期和endDate结束日期之间
 * @param startDate:开始日期
 * @param betweenDate:中间日期
 * @param endDate:结束日期要比开始日期大
 * @returns {boolean}
 */
export function isBetween(startDate,betweenDate,endDate) {
  return dayjs(startDate).isBetween(betweenDate, dayjs(endDate))
}

/**
 * 将传过来的日期转为当年的1月1号或者当月的1号或者当周的周一
 * @param date:传过来日期
 * @param dateType,日期类型,为:year,month,week这3种
 * @returns {string}
 */
export function getEarlyDaysDate(date,dateType) {
  return dayjs(date).startOf(dateType).format("YYYY-MM-DD")
}

/**
 * 将传过来的日期转为当年的12月31号或者当月的最后一天或者当周的周日
 * @param date:传过来日期
 * @param dateType,日期类型,为:year,month,week这3种
 * @returns {string}
 */
export function getLastDaysDate(date,dateType) {
  return dayjs(date).endOf(dateType).format("YYYY-MM-DD")
}

/**
 * 获取2个日期之间的所有日期,包括开始日期和结束日期,如:getIntermediateDate('2023-12-01','2023-12-15',1,'day'))
 * @param startDate:开始日期
 * @param endDate:结束日期要大于开始日期
 * @param num:在开始日期上加num,int类型,如果dateType为day,num为1那么就是在开始日期上加一天
 * @param dateType,日期类型,类型如下:'minute','hour','day','week','month','year'这六种类型
 * @returns {*[]}
 */
export function getIntermediateDate(startDate,endDate,num,dateType) {
  //声明一个数组用来存放所有日期,默认把开始日期放进数组里面,不然少一个开始日期数据
  let daysArray=[startDate]
  //判断startDate是否在endDate之前
  while (isBefore(startDate,endDate)){
    //如果开始日期在结束日期之前,那么就将开始日期加num,并重新赋值给开始日期,不然会死循环
    startDate = getXAfterDate(startDate,num,dateType)
    //将计算后的日期放进数组里面
    daysArray.push(startDate)
  }
  return daysArray
}

使用dataUtil.js日期工具类示例

在这里插入图片描述

App.vue代码如下:

<script setup>
  import {ref, inject, onMounted} from 'vue'
  import {getCurrentDate,getDateDiff,getXBeforeDate,getIntermediateDate} from '@/utils/dateUtil'

  //日期变量,使用ref进行双向绑定
  const dateValue = ref('')
  //获取日期变量值,需要加.value来获取值
  console.info("dateValue=",dateValue.value)

  //onMounted页面初始化完成后执行
  onMounted(()=>{
    //获取在main.js里面使用provide全局注册的函数
    const dayjs=inject('$dayjs')
    //使用dayjs将当前时间转换为指定样式
    console.log("dayjs=",dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'))
    //使用dateUtil工具类获取当前时间
    console.log("当前日期=",getCurrentDate())
    //计算2个日期之间相差多少天,只要开始日期和结束日期格式保持一致就行,日期格式为YYYY-MM-DD或者YYYY-MM-DD HH:mm:ss都能计算
    console.log("相差天数为=",getDateDiff('2024-02-01','2024-03-01','day'))
    //获取之前日期
    console.log("获取当前日期的前6天日期=",getXBeforeDate(getCurrentDate(),6,'day'))
    //获取开始日期与结束日期之间的所有日期
    console.log("开始日期到结束日期=",getIntermediateDate('2024-02-01','2024-02-15',1,'day'))
  })

</script>

<template>
  <el-button type="primary">Primary</el-button>
  <el-button type="success">Success</el-button>

  <!--日期选择器-->
  <el-date-picker
      v-model="dateValue"
      type="date"
      placeholder="请选择一天"
  />
</template>

<style scoped>

</style>

浏览器结果如下:
在这里插入图片描述
dayjs使用到这里介绍完毕了，2种使用方式，一种通过inject来使用，一种是直接使用写好的工具类。

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

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

相关文章

​夯实智算底座，加速AI应用丨九州未来签约中国电信

​夯实智算底座，加速AI应用丨九州未来签约中国电信

1月26日&#xff0c;中国电信中部智算中心发布会在武汉光谷盛大举办&#xff0c;标志着中部地区最高等级智算中心算力集群正式投入运营&#xff0c;今后将着力构建立足湖北、辐射长江中游城市群的智算算力高地。 期间&#xff0c;中国电信与九州未来亓绚签署算力合作意向协议&…
阅读更多...
js中继承的详解（一文读懂）

js中继承的详解（一文读懂）

文章目录 一、是什么二、实现方式原型链继承构造函数继承组合继承原型式继承寄生式继承寄生组合式继承 三、总结参考文献 一、是什么 继承&#xff08;inheritance&#xff09;是面向对象软件技术当中的一个概念。 如果一个类别B“继承自”另一个类别A&#xff0c;就把这个B称…
阅读更多...
贪心(Greedy algorithm)

贪心(Greedy algorithm)

众所不周知&#xff0c;贪心就是一种每次都抢局部最优解的算法(这样的确很贪)&#xff0c;但是想要证明贪心的正确性很难。但在比赛中&#xff0c;尤其是不会写DP的你&#xff0c;可以选择大胆尝试&#xff0c;写一个贪心&#xff0c;万一对了呢 (: 本期博客将介绍两种贪心的方…
阅读更多...
张维迎《博弈与社会》多重均衡与制度和文化（3）法律和社会规范的协调作用

张维迎《博弈与社会》多重均衡与制度和文化（3）法律和社会规范的协调作用

社会博弈通常存在多个纳什均衡。许多情况下&#xff0c;多个纳什均衡之间并不存在优劣之分&#xff1b;即使有优劣之分&#xff0c;也很难通过无成本的交流而选择一个特定的纳什均衡。这就产生了对制度和文化的需求。社会制度和社会规范&#xff08;文化、习惯等&#xff09;的…
阅读更多...
2024年美赛 （A题MCM）| 海蟒鳗鱼 |数学建模完整代码+建模过程全解全析

2024年美赛 （A题MCM）| 海蟒鳗鱼 |数学建模完整代码+建模过程全解全析

当大家面临着复杂的数学建模问题时&#xff0c;你是否曾经感到茫然无措&#xff1f;作为2022年美国大学生数学建模比赛的O奖得主&#xff0c;我为大家提供了一套优秀的解题思路&#xff0c;让你轻松应对各种难题。 让我们来看看美赛的A题&#xff01; 完整内容可以在文章末尾领…
阅读更多...
纳毕化学携手隆道打造数字化采购平台 推动采购业务管理能力升级

纳毕化学携手隆道打造数字化采购平台 推动采购业务管理能力升级

近期&#xff0c;纳毕化学集团有限公司&#xff08;以下简称“纳毕化学”&#xff09;与北京隆道网络科技有限公司合作&#xff0c;共同推出的“纳毕E-Trade采供协同云平台”正式上线运行&#xff0c;助力纳毕化学有效提升采购效率&#xff0c;降低采购成本&#xff0c;实现更加…
阅读更多...
【C/C++】C/C++编程——整型(二)

【C/C++】C/C++编程——整型(二)

在 C 中&#xff0c;整型数据可以分为有符号数&#xff08;Signed&#xff09;和无符号数&#xff08;Unsigned&#xff09;&#xff0c;这两种类型主要用于表示整数值&#xff0c;但它们在表示范围和用途方面有所不同。默认情况下&#xff0c;整数类型如 int、short、long 都是…
阅读更多...
应用智能家居领域中的低功耗蓝牙模块

应用智能家居领域中的低功耗蓝牙模块

智能家居&#xff08;smart home, home automation&#xff09;是以住宅为平台&#xff0c;利用综合布线技术、网络通信技术、 安全防范技术、自动控制技术、音视频技术将家居生活有关的设施集成&#xff0c;构建高效的住宅设施与家庭日程事务的管理系统&#xff0c;提升家居安…
阅读更多...
【Cocos入门】Cocos resources 加载资源

【Cocos入门】Cocos resources 加载资源

目录 动态加载 resources加载 SpriteFrame 或 Texture2D加载图集中的 SpriteFrame加载 FBX 或 glTF 模型中的资源资源批量加载预加载资源加载远程资源和设备资源 动态加载 resources 通常我们会把项目中需要动态加载的资源放在 resources 目录下&#xff0c;配合 resources.lo…
阅读更多...
Java方法的定义、调用和冲载

Java方法的定义、调用和冲载

目录 什么是方法方法的定义方法的声明方法声明的格式 方法的调用方式方法调用实例面试题在内存中的变化 方法的重载 什么是方法 方法(method)就是一段用来完成特定功能的代码片段&#xff0c;类似于其它语言的函数(function)。 方法用于定义该类或该类的实例的行为特征和功能实…
阅读更多...
sqli.labs靶场（23关到28a关）

sqli.labs靶场（23关到28a关）

23、第二十三关 id1单引号闭合 找位置1 and 12 union select 1,2,3 爆库&#xff1a;1 and 12 union select 1,2,database() 爆表名&#xff1a;1 and 12 union select 1,2,group_concat(table_name) from information_schema.tables where table_schemasecurity 爆字段&#…
阅读更多...
【算法详解 | 二分查找】详解二分查找 \ 折半查找高效搜索算法 | 顺序数组最快搜索算法 | 递归循环解决二分查找问题

【算法详解 | 二分查找】详解二分查找 \ 折半查找高效搜索算法 | 顺序数组最快搜索算法 | 递归循环解决二分查找问题

二分查找 by.Qin3Yu 本文需要读者掌握 顺序表 的操作基础&#xff0c;完整代码将在文章末尾展示。 顺序表相关操作可以参考我的往期博文&#xff1a; 【C数据结构 | 顺序表速通】使用顺序表完成简单的成绩管理系统.by.Qin3Yu 文中所有代码使用 C 举例&#xff0c;且默认已使用…
阅读更多...
Linux管道、网络管理和远程连接

Linux管道、网络管理和远程连接

这次来说一下Linux管道、网络管理与远程连接相关的一些内容&#xff0c;如下。 一、管道&#xff08;重点&#xff09; 1、管道符 用 “|”&#xff08;竖线&#xff09;表示。 作用&#xff1a;管道是一种通信机制&#xff0c;通常用于进程间的通信。它表现出来的形式将前…
阅读更多...
ZigBee学习——在官方例程基础实现点灯

ZigBee学习——在官方例程基础实现点灯

IAR版本 :10.10.1 Z-stack版本 :3.0.2 文章目录 一、买的板子原理图二、实现过程2.1 重定义LED的物理映射(HAL层)2.2 创建LED事件(应用层)2.2.1 定义用户事件2.2.2 修改zclGenericApp_event_loop() 2.3 触发事件 一、买的板子原理图 二、实现过程 2.1 重定义LED的物理映射(HAL…
阅读更多...
MirrorLayer可以正常触摸屏幕原理分析

MirrorLayer可以正常触摸屏幕原理分析

背景&#xff1a; 上次blog分享了给学员朋友们布置的作业&#xff0c;今天来进行简单的揭秘。 问题&#xff1a; 在多屏互动时候有一个屏幕的画面是一个MirrorLayer&#xff0c;另一个屏幕画面是真实的&#xff0c;即2个屏幕上有一个是MirrorLayer&#xff0c;这个时候疑问就…
阅读更多...
算法篇之二分

算法篇之二分

二分算法简介 特点 最简单的一种算法&#xff0c;也是最恶心&#xff0c;细节最多&#xff0c;最容易写出死循环的算法时间复杂度O(logN) 如何学习 明白其中的算法原理&#xff0c;二分并不是只有数组有序的的时候使用&#xff0c;而是看是否具有二段性。模板 朴素的二分模…
阅读更多...
算法面试八股文『 基础知识篇 』

算法面试八股文『 基础知识篇 』

博客介绍 近期在准备算法面试&#xff0c;网上信息杂乱不规整&#xff0c;出于强迫症就自己整理了算法面试常出现的考题。独乐乐不如众乐乐&#xff0c;与其奖励自己&#xff0c;不如大家一起嗨。以下整理的内容可能有不足之处&#xff0c;欢迎大佬一起讨论。 PS&#xff1a;…
阅读更多...
失物招领|基于Springboot的校园失物招领系统设计与实现(源码+数据库+文档)

失物招领|基于Springboot的校园失物招领系统设计与实现(源码+数据库+文档)

校园失物招领系统目录 目录 基于Springboot的校园失物招领系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、 管理员功能实现 (1) 失物招领管理 (2) 寻物启事管理 (3) 公告管理 (4) 公告类型管理 2、用户功能实现 (1) 失物招领 (2) 寻物启事 (3) 公告 …
阅读更多...
2024 美国大学生数学建模竞赛 美赛（C题）网球比赛趋势问题 国际大学生数学建模竞赛| 建模秘籍文章代码思路大全

2024 美国大学生数学建模竞赛 美赛（C题）网球比赛趋势问题 国际大学生数学建模竞赛| 建模秘籍文章代码思路大全

铛铛&#xff01;小秘籍来咯&#xff01; 小秘籍希望大家都能轻松建模呀&#xff0c;华数杯也会持续给大家放送思路滴~ 抓紧小秘籍&#xff0c;我们出发吧~ 完整内容可以在文章末尾领取&#xff01; 问题1 • 开发一个模型&#xff0c;捕捉到比赛进行时点的流动&#xff0c;…
阅读更多...
（2）(2.11) RFD900

（2）(2.11) RFD900

文章目录 前言 1 概述 2 主要功能 3 状态LED指示灯 4 接口 5 使用Mission Planner进行配置 6 支持不同国家/地区 7 讨论论坛 前言 RFD900 无线电调制解调器是一款高功率 900Mhz ISM 波段无线电调制解调器&#xff0c;设计用于远距离串行通信。据报道&#xff0c;其通信…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023