JS日期与字符串相互转换(时间格式化YYYY-MM-DD,Dayjs的使用)

news2024/9/27 19:23:57

JS日期与字符串相互转换——JS封装函数,Dayjs转换时间格式

  • 相关文章调用
  • 场景复现
  • 一、JS封装函数
      • 1、日期转字符串
      • 2、字符串转日期
  • 二、 Dayjs转换时间格式
      • 1、Dayjs快速安装与使用
      • 2、Dayjs格式化日期

相关文章调用

文章内容文章链接
JS数组对象——根据日期进行排序按照时间进行升序或降序排序https://blog.csdn.net/XSL_HR/article/details/128579840?spm=1001.2014.3001.5501
JS日期时间格式化——数字日期转中文日期(封装函数,dayjs转换时间格式)https://blog.csdn.net/XSL_HR/article/details/128607024?spm=1001.2014.3001.5501

场景复现

上期文章我们介绍了如何将2022-12-22转换为二〇二二年十二月二十二日,涉及到日期格式转换成YYYYMMDD格式的问题。本期文章以此为主线,用两种方法带领大家转换时间格式。

一、JS封装函数

首先是传统的封装函数,手写一个日期转字符串的函数并封装使用。

1、日期转字符串

  function dateToString (date){ 
   var  year = date.getFullYear(); 
   var  month =(date.getMonth() + 1).toString(); 
   var  day = (date.getDate()).toString();  
   if  (month.length == 1) { 
       month =  "0"  + month; 
   } 
   if  (day.length == 1) { 
       day =  "0"  + day; 
   }
   var  dateTime = year +  "-"  + month +  "-"  + day;
   return  dateTime; 
},

控制台调用打印一下结果:

console.log(dateToString("Wed Jan 04 2023 14:12:56 GMT+0800 (中国标准时间) "))

在这里插入图片描述

2、字符串转日期

function stringToDate (dateStr,separator){
      if (!separator){
             separator= "-" ;
      }
      var  dateArr = dateStr.split(separator);
      var  year = parseInt(dateArr[0]);
      var  month;                      
      if (dateArr[1].indexOf( "0" ) == 0){
          month = parseInt(dateArr[1].substring(1));
      } else {
           month = parseInt(dateArr[1]);
      }
      var  day = parseInt(dateArr[2]);
      var  date =  new  Date(year,month -1,day);
      return  date;
  }

控制台调用打印一下结果:

console.log(stringToDate("2022-12-22"))

在这里插入图片描述
这时,时间格式已经从"2022-12-22"转换成了
“Thu Dec 22 2022 00:00:00 GMT+0800 (中国标准时间)”
不过呢,一般是不会让你把时间转换成这样的。都是要求从日期转化为字符串YYYY-MM-DD格式
在这里插入图片描述

二、 Dayjs转换时间格式

点击前往官方文档

1、Dayjs快速安装与使用

要在Node.js 项目中使用 Day.js,只需使用 npm安装

npm install dayjs

node.js安装教程这里就不过多叙述了,可以翻看往期文章中的相关教程

然后在项目代码中引入即可:

const dayjs = require('dayjs')
//import dayjs from 'dayjs' // ES 2015
dayjs().format()

2、Dayjs格式化日期

未进行格式转化时

const nowDate = ref<Dayjs>() // 获取当前时间
console.log(dayjs("当前时间",nowDate.value)) 

在这里插入图片描述
经过时间转换后

const nowDate = ref<Dayjs>() // 获取当前时间
console.log("当前时间",(dayjs(nowDate.value).format("YYYY-MM-DD")) // dayjs进行时间转换

在这里插入图片描述
更多占位符

输入例子详情
YY01两位数的年份
YYYY2001四位数的年份
M1-12四位数的年份
MM01-12月份,从1开始
MMMJan-Dec缩写的月份名称
MMMMJanuary-December完整的月份名称
D1-31月份里的一天
DD01-31月份里的一天 ,两位数
H0-23小时
HH0-23小时,两位数
h1-12小时,12小时制
hh01-12小时,12小时制,两位数
m0-59分钟
mm00-59分钟,两位数
s0-59
ss00-59秒 两位数
S0-9毫秒,一位数
SS00-99毫秒,两位数
SSS000-999毫秒,三位数
AAM PM上午 下午 大写
aam pm上午 下午 小写

在这里插入图片描述


感兴趣的小伙伴可以订阅本专栏,方便后续了解学习~
觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~

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

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

相关文章

南邮数据结构考研常用算法

1.链表 在带头结点的链表中&#xff0c;删除所有值为x的结点 void Del_X(Linklist &L,ElemType x){LNode *pL->next, *preL,*q;while (p!null){if (p->datax){qp;pp->next;pre->nextp;free(q);}else{prep;pp->next;}} }使用单链表进行插入排序 ListNode*…

数组常用方法总结 (1) :pop / push / shift / unshift

pop 从尾部删除一项。改变原有数组。返回删除掉的内容。 <template><div class"myBlock"><div class"tableBlock"><div class"title">{{ newObject ? "操作后的数组" : "操作前的数组" }}</d…

从0到1完成一个Vue后台管理项目(十、列表API封装、Table列表渲染、表格数据转换)

往期 从0到1完成一个Vue后台管理项目&#xff08;一、创建项目&#xff09; 从0到1完成一个Vue后台管理项目&#xff08;二、使用element-ui&#xff09; 从0到1完成一个Vue后台管理项目&#xff08;三、使用SCSS/LESS&#xff0c;安装图标库&#xff09; 从0到1完成一个Vu…

docker安装及安装过程中遇到的问题

安装Docker-CE 备注&#xff1a;Docker 安装&#xff0c;请参考 Docker 官⽅⽂档: Install Docker Engine on Ubuntu | Docker Documentation 也可参照如下命令进行快速安装。 Ubuntu 卸载旧版本&#xff08;视需要&#xff09; $ sudo apt-get remove docker docker-engin…

Java并发(4)- synchronized与CAS

引言 上一篇文章中我们说过&#xff0c;volatile通过lock指令保证了可见性、有序性以及“部分”原子性。但在大部分并发问题中&#xff0c;都需要保证操作的原子性&#xff0c;volatile并不具有该功能&#xff0c;这时就需要通过其他手段来达到线程安全的目的&#xff0c;在Ja…

因子图--isam相关内容总结

编辑切换为居中添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09;编辑切换为居中添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09;平方根法--通过平方根的方法&#xff0c;发现矩阵新增加的变量都会出现在最后一行。Givens旋转方法求解Ax…

Linux环境下,java调用C/C++动态库

目录 一、环境准备 1、安装gcc/g 2、下载jdk库并配置运行环境 二、配合Java程序创建C程序的动态库 1、生成要求清单 2、交给C 去实现 (1) 接口函数实现 (2) 创建动态库 (3) 检查动态库是否正常链接 3、测试&#xff1a;Java程序调用C动态库 一、环境准备 既然是同时…

百万级数据以Excel形式导出

(1).主要考虑到两个方面&#xff0c;第一个方面是内存溢出问题&#xff0c;所以选用阿里的EasyExcel因为它对POI进行了封装功能强大&#xff1b;第二个方面是由于excel版本导致Sheet存储容量不一样&#xff0c;cexcel2003(.xls)每个Sheet只能存6万多条数据而cexcel2007(xlsx)能…

【自学Python】Python布尔型(bool)

Python布尔型(bool) Python布尔型(bool)教程 Python 布尔类型也叫 bool 类型&#xff0c;Python 布尔类型取值为 True 和 False。Python bool 类型的 True 表示条件为真&#xff0c; False 表示条件为假。 Python布尔型(bool) Python 中的布尔类型可以当做 整数 来对待&…

LeetCode 287. 寻找重复数难度中等2004

&#x1f308;&#x1f308;&#x1f604;&#x1f604;欢迎来到茶色岛独家岛屿&#xff0c;本期将为大家揭晓LeetCode 287. 寻找重复数难度中等2004&#xff0c;做好准备了么&#xff0c;那么开始吧。&#x1f332;&#x1f332;&#x1f434;&#x1f434;一、题目名称LeetCo…

怎么在Gitee(码云)上传一个项目(一分钟)

目录怎么在Gitee&#xff08;码云&#xff09;上传一个项目1、工具1.1、Git1.2、新建仓库2、上传流程3、回答上传项目流程中的几个疑问&#xff1f;怎么在Gitee&#xff08;码云&#xff09;上传一个项目 1、工具 1.1、Git 在Git官网或者利用镜像下载符合自己电脑操作系统版…

小众企业在选购低代码平台时需要注意什么

编者按&#xff1a;企业个性化定制需求如何实现&#xff1f;本文介绍了小众企业在选择低代码平台需要注意的点&#xff0c;帮助企业选出更合适得的软件平台。关键词&#xff1a;源码交付&#xff0c;数据整合&#xff0c;前后端分离&#xff0c;私有化部署&#xff0c;安全技术…

IB生物笔记:细胞学说

国际学校生物老师从0开始解读IB生物&#xff0c;感兴趣的同学记得收藏哦~IB生物分为SL(standard level)和HL(higher level)SL有6个topic∶细胞生物&#xff0c;分子生物&#xff0c;遗传学&#xff0c;生态学&#xff0c;物种进化以及多样性和人体生理。HL除了上述6个topic外还…

【pat】出租

下面是新浪微博上曾经很火的一张图&#xff1a;一时间网上一片求救声&#xff0c;急问这个怎么破。其实这段代码很简单&#xff0c;index数组就是arr数组的下标&#xff0c;index[0]2 对应 arr[2]1&#xff0c;index[1]0 对应 arr[0]8&#xff0c;index[2]3 对应 arr[3]0&#…

年底清货刻不容缓!3天清空库存的服装老板是怎么做到的?

春节气氛越来越浓厚&#xff0c; 服装人的心情却是越来越着急——眼看着要过年了&#xff0c;气候也马上回暖了&#xff0c;我店里的库存可咋办&#xff1f;做服装零售的老板都知道&#xff0c;大部分时候压垮服装店的不是淡季、不是租金、不是人工费&#xff0c;而是库存积压。…

Java IO流 - 对象序列化和对象反序列化

文章目录序列化对象对象序列化对象反序列化序列化对象 对象序列化 对象序列化概念: 作用&#xff1a;以内存为基准&#xff0c;把内存中的对象存储到磁盘文件中去&#xff0c;称为对象序列化。 使用到的流是对象字节输出流&#xff1a;ObjectOutputStream ObjectOutputStream构…

Navicat远程连接ubuntu数据库

关于这个问题&#xff0c;我看许多博主也给出了解答&#xff0c;但作者此次遇到的问题也是略微特殊&#xff0c;希望其他人遇到同样的问题能得到启发。 首先是MySQL的安装&#xff0c;我是用的是Xubuntu系统&#xff0c;按照ubuntu系统安装MySQL的步骤即可。如下&#xff1a; …

关系运算符shell

关系运算符只支持数字&#xff0c;不支持字符串&#xff0c;除非字符串的值是数字。下表列出了常用的关系运算符&#xff0c;假定变量 a 为 10&#xff0c;变量 b 为 20&#xff1a;运算符说明举例-eq检测两个数是否相等&#xff0c;相等返回 true。[ $a -eq $b ] 返回 false。…

Mask RCNN网络源码解读(Ⅲ) --- FCN网络

目录 1.FCN网络简介 2.FCN-32S 3.FCN-16S 4.FCN-8S 5.膨胀卷积&#xff08;空洞卷积&#xff09; 6.pytorch中FCN的实现 6.1 代码地址 1.FCN网络简介 首个端对端的针对像素级预测的全卷积网络。全卷积网络即将分类网络中的全连接层全部替换为卷积层。 从数据可以看出…

微服务自动化管理【etcd快速集群】

概述 1.etcd构建自身高可用集群主要有三种形式&#xff1a; 静态发现 预先已知etcd集群中有哪些节点&#xff0c;在启动时通过–initial-cluster参数直接指定好etcd的各个节点地址 etcd动态发现 静态配置前提是在搭建集群之前已经提前知道各节点的信息&#xff0c;而实际应用中…