前端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”

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

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

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

相关文章

6.C++:继承

一、继承 //1.类中的保护和私有在当前类中没有差别&#xff1b; //2.在继承后的子类中有差别&#xff0c;private在子类中不可见&#xff0c;所以用protected&#xff1b; class person { public:void print(){cout << "name:" << _name << endl;c…

#是啥,v-slot插槽的区别

在 Vue 3.x 中&#xff0c;您还可以使用 # 简写来代替 v-slot v-slot&#xff1a; v-slot 是 Vue 2.6 和 Vue 3.x 推荐的新的插槽语法。 v-slot 用于具名插槽&#xff0c;它允许您为插槽指定名称&#xff0c;并允许您传递具名插槽的内容。 例如&#xff0c;以下是使用 v-slot…

设计模式: 行为型之备忘录模式(13)

备忘录模式概述 备忘录模式&#xff08;Memento Pattern&#xff09;是一种行为设计模式&#xff0c;它允许在不破坏封装性的前提下捕获一个对象的内部状态&#xff0c;并在对象之外保存这个状态这样以后就可将该对象恢复到原先保存的状态。这种类型的设计模式属于行为模式在备…

【Qt 学习笔记】Qt常用控件 | 按钮类控件Push Button的使用及说明

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ Qt常用控件 | 按钮类控件Push Button的使用及说明 文章编号&#xff1…

2024年华中杯数学建模竞赛全攻略:ABC题思路解析+代码实现+数据集+论文撰写+全程答疑

引言 &#xff08;比赛后所有题目资料在文末获取呀&#xff09; 华中杯数学建模竞赛是数学建模领域的一项重要赛事&#xff0c;它不仅考验参赛者的数学建模能力&#xff0c;还考验了编程技能、数据分析能力和论文撰写能力。为了帮助参赛者更好地准备2024年的竞赛&#xff0c;本…

libftdi1学习笔记 6 - MPSSE QSPI

目录 1. 写 2. 读 3. 验证 QSPI采用4根线为数据口&#xff0c;SCK和CS保留同样的功能&#xff0c;一般&#xff14;个数据线采用MSB的方式发送数据&#xff0c;即高位在前。 QSPI只能是半双工工作。 1. 写 int qspiWriteBytes(uint8_t port, uint8_t* wrBuf, uint16_t l…

RAG学习笔记系列(一)

RAG 介绍 RAG 全称为 Retrieval Augmented Generation&#xff08;检索增强生成&#xff09;。是基于LLM构建系统的一种架构。 RAG 基本上可以理解为&#xff1a;搜索 LLM prompting。根据用户的查询语句&#xff0c;系统会先使用搜索算法获取到相关内容作为上下文&#xff0…

JavaScript如何设置定时器,怎么清除定时器

在JavaScript中&#xff0c;你可以使用setTimeout()和setInterval()函数来设置定时器&#xff0c;以及使用clearTimeout()和clearInterval()函数来清除定时器。 setTimeout() setTimeout()函数用于在指定的毫秒数之后执行一个函数或计算表达式。它返回一个表示定时器的ID&…

pnpm 报错: ERR_PNPM_META_FETCH_FAIL

今天突然遇到一个报错&#xff0c;pnpm 报错&#xff1a; ERR_PNPM_META_FETCH_FAIL  GET https://registry.npm.taobao.org/vue%2Fcli-service: request to https://registry.npm.taobao.org/vue%2Fcli-service failed, reason: certificate has expired问题原因&#xff1a;…

when语法学习及判断主机别名实例

目录 1、概念 2、实例配置 2.1 编写剧本体验when的用法 2.2 执行剧本文件 2.3 使用ansible临时命令进行测试 1、概念 when是用于判断的语法&#xff0c;将其用在每个动作的下方进行判断&#xff0c;使得只有在满足条件才会执行。 2、实例配置-判断主机别名 在每个客户端中…

移动端uniapp下载文件并保存到手机,下载准考证保存到手机

移动端uniapp下载文件并保存到手机&#xff0c;下载准考证保存到手机 1. 使用uni.request下载文件 uni.request({ url: http://example.com/file_url, // 要下载的文件的URL method: GET, responseType: arraybuffer, // 响应类型为arraybuffer (二进制形式) success: functi…

Compose 基础组件

文章目录 Compose 基础组件Modifier 修饰符Scaffold 脚手架 Compose 基础组件 Modifier 修饰符 在传统视图体系中&#xff0c;使用XML文件描述组件的样式&#xff0c;而在Compose中使用Modifier&#xff0c;每个基础的Composable组件都有一个modifier参数&#xff0c;通过Mod…

使用CCS软件查看PID曲线

在刚开始学习PID的时候&#xff0c;都需要借助PID的曲线来理解比例&#xff0c;积分&#xff0c;微分这三个参数的具体作用。但是这些曲线生成一般都需要借助上位机软件或者在网页上才能实现。如果是在单片机上调试程序的话&#xff0c;想要看曲线&#xff0c;一般就是通过串口…

【YOLOv5】使用yolov5训练模型时报错合集

文章目录 前言问题1 -- VsCode终端无法进入Anaconda创建的虚拟环境【问题描述】【问题分析】【解决方式】方法一方法二 问题2 -- 怎么在VsCode中为项目配置Anaconda创建的虚拟环境【问题描述】【解决方式】 问题3 -- yolov5训练模型时报错RuntimeError: result type Float cant…

web自动化测试系列-selenium常用方法定位(五)

目录 1.selenium的定位方法 2.操作案例 3.实现代码 前面我们介绍了html页面元素主要是通过标签和属性来进行定位 &#xff0c;只要满足唯一&#xff0c;无论是标签还是属性 &#xff0c;都能进行定位 。当然 &#xff0c;我们要通过selenium来进行定位 &#xff0c;同样还是…

富格林:利用正规方法提升出金收益

富格林悉知&#xff0c;黄金现货是众多黄金产品当中交易规则优势较为明显的存在&#xff0c;尤其是近段时间的行情走势十分强劲&#xff0c;这使得投资者们获得了更充足的做单机会。然而&#xff0c;要想在炒黄金的市场上取得成功&#xff0c;除了对市场有深刻的理解外&#xf…

总结:css中水平居中

css水平居中功能很常用&#xff0c;但一直没有系统的总结过&#xff0c;今天来总结水平下常见的方式&#xff1a; 1. 文本或内联元素的居中&#xff1a; 使用 text-align: center; 属性可以让内部的文本和内联元素在容器中水平居中。 .container {text-align: center; }2. 块…

小公司应该选择docker swarm还是k8s

对于小公司选择 Docker Swarm 还是 Kubernetes&#xff08;简称 K8s&#xff09;作为容器编排平台&#xff0c;应考虑以下几个关键因素&#xff1a; 技术复杂度与学习曲线&#xff1a; Docker Swarm&#xff1a;因其与 Docker 紧密集成&#xff0c;使用 Docker Compose 语法作…

MongoDB聚合运算符:$ne

文章目录 语法举例 $ne聚合运算符用于比较两个值是否不相等&#xff0c;如果他们的值不相等&#xff0c;返回true&#xff1b;如果他们的值相等&#xff0c;返回false。 语法 { $ne: [ <expression1>, <expression2> ] }$ne可以用来比较任何类型的值&#xff0c;…

【C++风云录】梦幻般的机器人世界:探索ROS、PCL、OpenCV和更多顶尖技术

机器人技术与计算机视觉世界&#xff1a;ROS、PCL、OpenCV等综合指南 前言 本文旨在深入探讨ROS&#xff08;机器人操作系统&#xff09;、PCL&#xff08;点云库&#xff09;、OpenCV&#xff08;开源计算机视觉库&#xff09;、Eigen&#xff08;线性代数库&#xff09;、B…