前端 日期 new Date 少0 转换成 yyyy-MM-dd js vue

2024-05-11 08:36

本文主要是介绍前端 日期 new Date 少0 转换成 yyyy-MM-dd js vue,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 在console控制台直接输出new Date(),是这样:

Fri May 10 2024 23:36:06 GMT+0800 (中国标准时间)

输出new Date().toLocaleString(),是这样:

'2024/5/10 23:36:06'

输出new Date().toISOString(),是这样:

'2024-05-10T15:36:06.161Z'

输出new Date().toGMTString(),是这样:

'Fri, 10 May 2024 15:36:06 GMT'

输出new Date().toUTCString(),是这样:

'Fri, 10 May 2024 15:41:52 GMT'

ISO,GMT,UTC,都是0时区,只有Locale是当地时区,即服务器所在时区(我在东八区)。

但是LocaleString拿到的却是字符串2024/5/10 23:36:06。

所以利用getMonth,getDate,但由于个位是一位数字,所以需要在前面补充0。优雅写法如下:

//补充:date.getMonth() 0是1月,1是2月,以此类推。
function formatDateTime(date) {const year = date.getFullYear();const month = ('0' + (date.getMonth() + 1)).slice(-2);const day = ('0' + date.getDate()).slice(-2);const hours = ('0' + date.getHours()).slice(-2);const minutes = ('0' + date.getMinutes()).slice(-2);const seconds = ('0' + date.getSeconds()).slice(-2);return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}const date = new Date();
const formatDate = formatDateTime(date);

2、使用第三方库
也可以使用第三方库来格式化日期字符串,如 moment.js:

const moment = require('moment');const date = new Date();
const formatDateTime = moment(date).format('YYYY-MM-DD HH:mm:ss');

3、使用 ES6 的模板字符串法,即 ` 这个符号(键盘上数字1左边的符号):

const date = new Date();
const formatDateTime = `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}-${('0' + date.getDate()).slice(-2)} ${('0' + date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}:${('0' + date.getSeconds()).slice(-2)}`;

这个符号,通常还会见到一种写法:虽然这样写会出现错误格式,但这只是更直观表达这种符号的写法,任何字符都可以直接写在 ` 这个符号里。就等同于是字符串

const formateDate = `${date.getFullYear()}-0${date.getMonth() + 1}-0${date.getDate}`

这篇关于前端 日期 new Date 少0 转换成 yyyy-MM-dd js vue的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

JS 实现复制到剪贴板的几种方式小结

《JS实现复制到剪贴板的几种方式小结》本文主要介绍了JS实现复制到剪贴板的几种方式小结,包括ClipboardAPI和document.execCommand这两种方法,具有一定的参考价值,感兴趣的... 目录一、Clipboard API相关属性方法二、document.execCommand优点:缺点:

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》:本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果,详细内容请阅读本文,希望能对你有所帮助... 过往的实现方法是使用浮动加

css渐变色背景|<gradient示例详解

《css渐变色背景|<gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变,本文介绍css渐变色背景|<gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景,可以看做是一种特殊的背景图片。(是作为背

springboot日期格式化全局LocalDateTime详解

《springboot日期格式化全局LocalDateTime详解》文章主要分析了SpringBoot中ObjectMapper对象的序列化和反序列化过程,并具体探讨了日期格式化问题,通过分析Spri... 目录分析ObjectMapper与jsonSerializer结论自定义日期格式(全局)扩展利用配置

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》:本文主要介绍了如何使用CSS自定义浏览器滚动条的样式,包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式,并提供了完整的CSS代码示例,通过这些技巧,你可以为你的网站添加个性化的滚动条样式,从而提升用户体验,详细内容请阅读本文,希望能对你有所帮助...

css实现图片旋转功能

《css实现图片旋转功能》:本文主要介绍了四种CSS变换效果:图片旋转90度、水平翻转、垂直翻转,并附带了相应的代码示例,详细内容请阅读本文,希望能对你有所帮助... 一 css实现图片旋转90度.icon{ -moz-transform:rotate(-90deg); -webkit-transfo

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要

对postgresql日期和时间的比较

《对postgresql日期和时间的比较》文章介绍了在数据库中处理日期和时间类型时的一些注意事项,包括如何将字符串转换为日期或时间类型,以及在比较时自动转换的情况,作者建议在使用数据库时,根据具体情况... 目录PostgreSQL日期和时间比较DB里保存到时分秒,需要和年月日比较db里存储date或者ti

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element