vue时间组件:dayjs与moment

2024-03-26 12:28

本文主要是介绍vue时间组件:dayjs与moment,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、dayjs使用

Day.js是一个极简的JavaScript库,可以为现代浏览器解析、验证、操作和显示日期和时间。

具体使用可参考: dayjs官网

        1、本年

start = dayjs().startOf('year').format('YYYY-MM-DD')
end = dayjs().endOf('year').format('YYYY-MM-DD')
console.log(start,end)  // ['2024-01-01', '2024-12-31']

        2、上一年

start = dayjs().startOf('year').format('YYYY-MM-DD')
end = dayjs().endOf('year').subtract(6, 'month').format('YYYY-MM-DD')
console.log(start,end)  // ['2023-01-01', '2023-12-31']

        3、下一年 

start = dayjs().add(1, 'year').startOf('year').format('YYYY-MM-DD')
end = dayjs().add(1, 'year').endOf('year').format('YYYY-MM-DD')
console.log(start,end)  // ['2025-01-01', '2025-12-31']

        4、上半年

start = dayjs().startOf('year').format('YYYY-MM-DD')
end = dayjs().endOf('year').subtract(6, 'month').format('YYYY-MM-DD')
console.log(start,end)  // ['2024-01-01', '2024-06-30']

        5、下半年

start = dayjs().startOf('year').add(6, 'month').format('YYYY-MM-DD')
end = dayjs().endOf('year').format('YYYY-MM-DD')
console.log(start,end)  // ['2024-07-01', '2024-12-31']

        6、本季度

start = dayjs().startOf('quarter').format('YYYY-MM-DD')
end = dayjs().endOf('quarter').format('YYYY-MM-DD')
console.log(start,end)  // ['2024-01-01', '2024-03-31']

        7、本月

start = dayjs().startOf('month').format('YYYY-MM-DD')
end = dayjs().endOf('month').format('YYYY-MM-DD')
console.log(start,end)  // ['2024-03-01', '2024-03-31']

 二、moment使用

具体使用可参考:moment官网

        1、当前时间

const time = moment().format('YYYY-MM-DD HH:mm:ss')
console.log(time) // 2024-03-26 10:52:31

        2、年积日

const dayForYear = moment().dayOfYear()
console.log(dayForYear) // 86

        3、当前周

const week = moment().week()
console.log(week) // 13
start = moment().startOf('week').format('YYYY-MM-DD')
end = moment().endOf('week').format('YYYY-MM-DD')
console.log(start, end) // 2024-03-24 2024-03-30

        4、当前月

console.log(month) // 3
start = moment().startOf('month').format('YYYY-MM-DD')
end = moment().endOf('month').format('YYYY-MM-DD')
console.log(start, end) // 2024-03-01 2024-03-31

        5、当前季度

const quarter = moment().quarter()
console.log(quarter) // 1
start = moment().startOf('quarter').format('YYYY-MM-DD')
end = moment().endOf('quarter').format('YYYY-MM-DD')
console.log(start, end) // 2024-01-01 2024-03-31

        6、当前年 

start = moment().startOf('year').format('YYYY-MM-DD')
end = moment().endOf('year').format('YYYY-MM-DD')
console.log(start, end) // 2024-01-01 2024-12-31

        7、上一年

start = moment().add(-1, 'y').startOf('year').format('YYYY-MM-DD')
end = moment().add(-1, 'y').endOf('year').format('YYYY-MM-DD')
console.log(start, end) // 2023-01-01 2023-12-31

        8、下一年

start = moment().add(1, 'y').startOf('year').format('YYYY-MM-DD')
end = moment().add(1, 'y').endOf('year').format('YYYY-MM-DD')
console.log(start, end) // 2025-01-01 2025-12-31

        9、上半年

start = moment().month(0).startOf('month').format('YYYY-MM-DD')
end = moment().month(5).endOf('month').format('YYYY-MM-DD')
console.log(start, end) // 2024-01-01 2024-06-30

        10、下半年 

start = moment().month(6).startOf('month').format('YYYY-MM-DD')
end = moment().month(11).endOf('month').format('YYYY-MM-DD')
console.log(start, end) // 2024-07-01 2024-12-31

这篇关于vue时间组件:dayjs与moment的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/848504

相关文章

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

C++ 函数 strftime 和时间格式示例详解

《C++函数strftime和时间格式示例详解》strftime是C/C++标准库中用于格式化日期和时间的函数,定义在ctime头文件中,它将tm结构体中的时间信息转换为指定格式的字符串,是处理... 目录C++ 函数 strftipythonme 详解一、函数原型二、功能描述三、格式字符串说明四、返回值五

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

从基础到进阶详解Pandas时间数据处理指南

《从基础到进阶详解Pandas时间数据处理指南》Pandas构建了完整的时间数据处理生态,核心由四个基础类构成,Timestamp,DatetimeIndex,Period和Timedelta,下面我... 目录1. 时间数据类型与基础操作1.1 核心时间对象体系1.2 时间数据生成技巧2. 时间索引与数据

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》:本文主要介绍了html滚动条滚动过快会留下边框线的解决方案,解决方法很简单,详细内容请阅读本文,希望能对你有所帮助... 滚动条滚动过快时,会留下边框线但其实大部分时候是这样的,没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行

Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析

《Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析》InstantiationAwareBeanPostProcessor是Spring... 目录一、什么是InstantiationAwareBeanPostProcessor?二、核心方法解

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv

C++ RabbitMq消息队列组件详解

《C++RabbitMq消息队列组件详解》:本文主要介绍C++RabbitMq消息队列组件的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. RabbitMq介绍2. 安装RabbitMQ3. 安装 RabbitMQ 的 C++客户端库4. A

利用Python实现时间序列动量策略

《利用Python实现时间序列动量策略》时间序列动量策略作为量化交易领域中最为持久且被深入研究的策略类型之一,其核心理念相对简明:对于显示上升趋势的资产建立多头头寸,对于呈现下降趋势的资产建立空头头寸... 目录引言传统策略面临的风险管理挑战波动率调整机制:实现风险标准化策略实施的技术细节波动率调整的战略价