跨境派

跨境派

跨境派,专注跨境行业新闻资讯、跨境电商知识分享!

当前位置:首页 > 卖家故事 > 前端中不同格式的日期相互转换(字符串、时间戳)js相关

前端中不同格式的日期相互转换(字符串、时间戳)js相关

时间:2024-03-31 19:10:45 来源:网络cs 作者:胡椒 栏目:卖家故事 阅读:

标签: 相关  转换  相互  格式  日期 
阅读本书更多章节>>>>

在项目中遇到了,需要实现字符串和Unix时间戳的相互转换,随手记录一下。
我使用的组件库为Naive UI,涉及到的组件为日期选择器(Date Picker)。作者在文档中写道:

实话说我不喜欢这个 feature,因为多数情况下,传递时间字符串不是个最佳实践。但是现实世界是复杂的,我希望这个功能能帮你解决一些棘手的问题,比如为了后端传过来的数据买账。

事实也确实如此,那今天就来倒腾倒腾这些和日期有关的东西吧!

部分内容来自
Day.js中文网
Naive UI

目录

一、字符串—>Unix时间戳(毫秒)(一)使用Date.parse()(二)使用dayjs()解析为Date对象,使用Date上的方法 二、Unix时间戳(毫秒)—>字符串,使用dayjs()(一)解析1.当前时间2.ISO 8601格式的字符串3.Unix时间戳(毫秒)4.Unix时间戳(秒)5.Date对象 (二)格式化显示1.手动拼接2.dayjs().format() 三、在<n-date-picker />中使用

一、字符串—>Unix时间戳(毫秒)

(一)使用Date.parse()

Date.parse() 方法解析一个表示某个日期的字符串,并返回从 1970-1-1 00:00:00 UTC 到该日期对象(该日期对象的 UTC 时间)的毫秒数,如果该字符串无法识别,或者一些情况下,包含了不合法的日期数值(如:2015-02-31),则返回值为 NaN。

const str = '2023-10-8'const ttmp = Date.parse(str);console.log("ttmp", ttmp);

打印结果:
在这里插入图片描述

str为表示日期的字符串。

该字符串应该能被 Date.parse() 正确方法识别(即符合 IETF-compliant RFC 2822 timestamps 或 version of ISO8601)。

IETF-compliant RFC 2822 timestamps
version of ISO8601

(二)使用dayjs()解析为Date对象,使用Date上的方法

const d = dayjs('2023-10-8')const ttmp1 = d.valueOf()const ttmp2 = Number(d)

打印结果:
在这里插入图片描述

二、Unix时间戳(毫秒)—>字符串,使用dayjs()

我们先来了解一些dayjs的知识

(一)解析

解析后,返回一个Day.js对象

1.当前时间

直接调用dayjs(),返回一个包含当前日期和时间的Day.js对象

var now = dayjs()console.log(now)

在控制台中打印解析出来的内容:
在这里插入图片描述
年份: y 月份 : y 月份: y月份:M+1
天数: D 时 : D 时: D时:h
分: m 秒 : m 秒: m秒:s

2.ISO 8601格式的字符串

const d = dayjs('2018-04-04T16:00:00.000Z')console.log(d)

dayjs()会将ISO 8601格式的字符串按以下方式解析
在这里插入图片描述
Day.js中文网提示:

为了保证结果一致,当解析除了 ISO 8601 格式以外的字符串时,您应该使用 String + Format。

3.Unix时间戳(毫秒)

同样的,传入一个Unix时间戳(13 位数字,从1970年1月1日 UTC 午夜开始所经过的毫秒数) ,dayjs也会进行相同的解析,创建一个Day.js对象
这里推荐一个时间戳转换工具:https://tool.lu/timestamp/在这里插入图片描述

dayjs(1318781876406)
在这里插入图片描述

4.Unix时间戳(秒)

解析传入的一个 Unix 时间戳 (10 位数字,从1970年1月1日 Utc 午夜开始所经过的秒数) 创建一个 Day.js 对象。

dayjs.unix(1318781876)

在这里插入图片描述

5.Date对象

var d = new Date(2008, 7, 28)var day = dayjs(d)

在这里插入图片描述

(二)格式化显示

1.手动拼接

如果你不太了解dayjs的格式化方法,你完全可以通过Day.js对象自己拼接出想要的格式。
例如,对于"YYYY/MM/DD HH:mm:ss"的格式,拼接方法如下:

const formatTimestamp = (ttmp: number) => {  var y = dayjs(ttmp).$y.toString();  var m =    dayjs(ttmp).$M + 1 >= 10      ? (dayjs(ttmp).$M + 1).toString()      : "0" +        (dayjs(ttmp).$M + 1)          .toString()          .toString();  var d =    dayjs(ttmp).$D >= 10      ? dayjs(ttmp).$D.toString()      : "0" + dayjs(ttmp).$D.toString().toString();  var ht =    dayjs(ttmp).$H >= 10      ? dayjs(ttmp).$H.toString()      : "0" + dayjs(ttmp).$H.toString();  var mt =    dayjs(ttmp).$m >= 10      ? dayjs(ttmp).$m.toString()      : "0" + dayjs(ttmp).$m.toString();  var s =    dayjs(ttmp).$s >= 10      ? dayjs(ttmp).$s.toString()      : "0" + dayjs(ttmp).$s.toString();  return y + "/" + m + "/" + d + " " + ht + ":" + mt + ":" + s;};

2.dayjs().format()

但如果你了解dayjs的话,你会发现它其实是有格式化函数的~即一行代码就可以解决了~!有空还是得多看看文档啊。。。现成的format不用,整什么真假掺半的原生js,我还搁这儿美呢。。。

dayjs(ttmp:number).format('YYYY-MM-DD HH:mm:ss')

三、在中使用

对于Naive UI中的日期选择器(Date Picker)组件,作者已经给我们留好API了,感谢他

<template>  <pre>{{ formattedValue }}</pre>  <n-date-picker    v-model:formatted-value="formattedValue"    value-format="yyyy.MM.dd HH:mm:ss"    type="datetime"    clearable  /></template><script lang="ts">import { defineComponent, ref } from 'vue'export default defineComponent({  setup () {    return {      formattedValue: ref('2007.06.30 12:08:55')    }  }})</script>

结束~!

阅读本书更多章节>>>>

本文链接:https://www.kjpai.cn/gushi/2024-03-31/151735.html,文章来源:网络cs,作者:胡椒,版权归作者所有,如需转载请注明来源和作者,否则将追究法律责任!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。

上一篇:CSS学习笔记

下一篇:返回列表

文章评论