前端JS必用工具【js-tool-big-box】,时间日期转换学习一

2024-04-18 20:44

本文主要是介绍前端JS必用工具【js-tool-big-box】,时间日期转换学习一,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

这一小节,我们学习一下  js-tool-big-box 这个npm 前端工具库,关于时间日期格式转换的一部分,后续还会有。

目录

1 安装

2 项目中引入 

3 工具使用 

3.1 年月日时分秒的单独处理

3.2 以上方法中第一个参数

3.3 日期时间的转换

 3.4 更个性的时间格式

4 本节总结


1 安装

使用 js-tool-big-box 需要先安装,可执行以下命令进行安装

npm install js-tool-big-box

2 项目中引入 

不管你是Vue项目,或者是React项目中,你都可以引入这个npm包,进行工具使用,引入代码如下。工具中暴露了 timeBox 这个大的对象供大家使用

import { timeBox } from 'js-tool-big-box';

3 工具使用 

3.1 年月日时分秒的单独处理

很多时候,我们的业务比较独特,比如“2024年”,可能这个时候比较独特之处在于,不显示年,而是显示其他的语种的年,如果都引入一些语言转换包,代码库体积比较大,所以这个的方法做了独特处理。

代码如下:

const year = timeBox.getMyYear(null, '年');console.log(year);const yearALB = timeBox.getMyYear(null, 'سنة');console.log(yearALB);const month = timeBox.getMyMonth(null, '月');console.log(month);const date = timeBox.getMyDate(null, '日');console.log(date);const hour = timeBox.getMyHour(null, 'hour');console.log(hour);const minutes = timeBox.getMyMinutes(null, 'min');console.log(minutes);const seconds = timeBox.getMySeconds(null, '秒');console.log(seconds);

展示效果如下图:

这里可以说是随心所欲,根据自己的产品续期文案,想怎么传入就怎么传入,很灵活。

3.2 以上方法中第一个参数

3.1中方法内都传入了null的第一个参数,如果传入null表示当前时间,当然,我们也可以传入一个其他的时间,代码如下:

const year = timeBox.getMyYear('2012', '年');console.log('传入参数的年::', year);const month = timeBox.getMyMonth('2012-03', '月');console.log('传入参数的月::', month);const date = timeBox.getMyDate(1363098142000);console.log('传入时间戳不用显示单位::', date);

显示效果如下图:

3.3 日期时间的转换

业务开发中,日期时间的转换很常见,使用频率非常高,而且业务千变万化,非常灵活。比如要展示2024-02-03,比如要展示2024-02-11 10:22,再比如只展示 03-12,甚至还有只展示10:22,还有的需要展示成10点12分,还有2024/02/11 这样子的,所以,我们的工具js-tool-big-box就要很灵活。

工具中提供了三种固定格式的转换,分别是 

年月日:YYYY-MM-DD

年月日时分:YYYY-MM-DD hh:mm

年月日时分秒:YYYY-MM-DD hh:mm:ss

当然,年月日中间的展示符号也可以随意替换,代码如下:

const dateTime1 = timeBox.getFullDateTime(null, 'YYYY-MM-DD', '/');console.log(dateTime1);const dateTime2 = timeBox.getFullDateTime(null, 'YYYY-MM-DD hh:mm', '~');console.log(dateTime2);const dateTime3 = timeBox.getFullDateTime(null, 'YYYY-MM-DD hh:mm:ss');console.log(dateTime3);

这里的 getFullDateTime 接受3个入参,第一个表示传入的时间,可以不传,第二个表示需要转换的格式,第三个表示替换年月日中间的符号,可以随意替换,你看这里就用了斜杠和小弯弯线。效果如下图:

 3.4 更个性的时间格式

如果你需要更加个性的时间展示方式,比如10点12分这样子,你可以自己利用公共方法自由组合起来:

const hourShow= timeBox.getMyDate(null, '点');
const minShow= timeBox.getMyMinutes(null, '分钟');
const timeShow = `${hourShow} ${minShow}`;

4 本节总结

好啦,本小节就先到这里啦,这一小节主要是说了 js-tool-big-box 日期时间相关的几个API,后边继续,我们总结一下:

方法名作用参数说明

timeBox.getMyYear

返回年+单位

第一个参数必填,如果无需特定时间,就传入null,null表示当前时间;

第二个参数非必填,表示要展示的单位

timeBox.getMyMonth

返回月+单位同上

timeBox.getMyDate

返回日+单位同上

timeBox.getMyHour

返回时+单位同上

timeBox.getMyMinutes

返回分+单位同上

timeBox.getMySeconds

返回秒+单位同上

timeBox.getFullDateTime

返回日期时间

第一个参数必填,如果无需特定时间,就传入null,null表示当前时间;

第二个参数必填,目前支持传入三种字符串数据,分别是"YYYY-MM-DD"、“YYYY-MM-DD hh:mm”、“YYYY-MM-DD hh:mm:ss”

第三个参数非必填,表示可以自定义年月日中间的分隔符

这篇关于前端JS必用工具【js-tool-big-box】,时间日期转换学习一的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

Java进阶学习之如何开启远程调式

《Java进阶学习之如何开启远程调式》Java开发中的远程调试是一项至关重要的技能,特别是在处理生产环境的问题或者协作开发时,:本文主要介绍Java进阶学习之如何开启远程调式的相关资料,需要的朋友... 目录概述Java远程调试的开启与底层原理开启Java远程调试底层原理JVM参数总结&nbsMbKKXJx

基于Python开发PDF转PNG的可视化工具

《基于Python开发PDF转PNG的可视化工具》在数字文档处理领域,PDF到图像格式的转换是常见需求,本文介绍如何利用Python的PyMuPDF库和Tkinter框架开发一个带图形界面的PDF转P... 目录一、引言二、功能特性三、技术架构1. 技术栈组成2. 系统架构javascript设计3.效果图

MyBatis-Plus中静态工具Db的多种用法及实例分析

《MyBatis-Plus中静态工具Db的多种用法及实例分析》本文将详细讲解MyBatis-Plus中静态工具Db的各种用法,并结合具体案例进行演示和说明,具有很好的参考价值,希望对大家有所帮助,如有... 目录MyBATis-Plus中静态工具Db的多种用法及实例案例背景使用静态工具Db进行数据库操作插入

Java实现将byte[]转换为File对象

《Java实现将byte[]转换为File对象》这篇文章将通过一个简单的例子为大家演示Java如何实现byte[]转换为File对象,并将其上传到外部服务器,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言1. 问题背景2. 环境准备3. 实现步骤3.1 从 URL 获取图片字节数据3.2 将字节数组

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

Java中数组转换为列表的两种实现方式(超简单)

《Java中数组转换为列表的两种实现方式(超简单)》本文介绍了在Java中将数组转换为列表的两种常见方法使用Arrays.asList和Java8的StreamAPI,Arrays.asList方法简... 目录1. 使用Java Collections框架(Arrays.asList)1.1 示例代码1.

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

Redis客户端工具之RedisInsight的下载方式

《Redis客户端工具之RedisInsight的下载方式》RedisInsight是Redis官方提供的图形化客户端工具,下载步骤包括访问Redis官网、选择RedisInsight、下载链接、注册... 目录Redis客户端工具RedisInsight的下载一、点击进入Redis官网二、点击RedisI

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效