javascript实现时间日期的格式化的方法汇总


Posted in Javascript onAugust 06, 2020

有的时候,我们需要一定格式的 时间 比如 2017-05-12 08:48 这样的格式。
上代码先

时间格式化

第一种

function formatDate(time){
	var date = new Date(time);

	var year = date.getFullYear(),
		month = date.getMonth() + 1,//月份是从0开始的
		day = date.getDate(),
		hour = date.getHours(),
		min = date.getMinutes(),
		sec = date.getSeconds();
	var newTime = year + '-' +
				month + '-' +
				day + ' ' +
				hour + ':' +
				min + ':' +
				sec;
	return newTime;			
}

输出结果:

javascript实现时间日期的格式化的方法汇总

前置0

但是这里存在一个问题,就是,我想要的格式应该是 2017-05-12 08:49:25 在月、日、时、分、秒 小于10的时候,应该要前置一个0。
改进代码:

第二种

function formatDate(time){
	var date = new Date(time);

	var year = date.getFullYear(),
		month = date.getMonth()+1,//月份是从0开始的
		day = date.getDate(),
		hour = date.getHours(),
		min = date.getMinutes(),
		sec = date.getSeconds();
	var newTime = year + '-' +
				(month < 10? '0' + month : month) + '-' +
				(day < 10? '0' + day : day) + ' ' +
				(hour < 10? '0' + hour : hour) + ':' +
				(min < 10? '0' + min : min) + ':' +
				(sec < 10? '0' + sec : sec);

	return newTime;			
}

formatDate(new Date().getTime());//2017-05-12 09:09:21

第三种

这下格式对了。但是会不会麻烦了点?我们再试试这种
一个长度为10 的数组:

var preArr = Array.apply(null,Array(10)).map(function(elem, index) {
		return '0'+index;
	});////开个长度为10的数组 格式为 ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"]

在如果数字在preArr中则群preArr[i],否则 就本身的值,比如:preArr[month]||month。具体实现如下:

function formatDate(time){
	var date = new Date(time);

	var year = date.getFullYear(),
		month = date.getMonth()+1,//月份是从0开始的
		day = date.getDate(),
		hour = date.getHours(),
		min = date.getMinutes(),
		sec = date.getSeconds();
	var preArr = Array.apply(null,Array(10)).map(function(elem, index) {
		return '0'+index;
	});////开个长度为10的数组 格式为 00 01 02 03

	var newTime = year + '-' +
				(preArr[month]||month) + '-' +
				(preArr[day]||day) + ' ' +
				(preArr[hour]||hour) + ':' +
				(preArr[min]||min) + ':' +
				(preArr[sec]||sec);

	return newTime;			
}
formatDate(new Date().getTime());//2017-05-12 09:45:41

任意设置时间模式

第四种(推荐)

以上,都是按照固定的格式YY-MM-DD hh:mm:ss 输出的。要是产品突然说,改成2017年05月12这种格式,天啦撸,又要改o(?□?)o。那我还是写个结构好一些的吧,你们随便玩。

function formatDate(time,format='YY-MM-DD hh:mm:ss'){
	var date = new Date(time);

	var year = date.getFullYear(),
		month = date.getMonth()+1,//月份是从0开始的
		day = date.getDate(),
		hour = date.getHours(),
		min = date.getMinutes(),
		sec = date.getSeconds();
	var preArr = Array.apply(null,Array(10)).map(function(elem, index) {
		return '0'+index;
	});////开个长度为10的数组 格式为 00 01 02 03

	var newTime = format.replace(/YY/g,year)
						.replace(/MM/g,preArr[month]||month)
						.replace(/DD/g,preArr[day]||day)
						.replace(/hh/g,preArr[hour]||hour)
						.replace(/mm/g,preArr[min]||min)
						.replace(/ss/g,preArr[sec]||sec);

	return newTime;			
}
formatDate(new Date().getTime());//2017-05-12 10:05:44
formatDate(new Date().getTime(),'YY年MM月DD日');//2017年05月12日
formatDate(new Date().getTime(),'今天是YY/MM/DD hh:mm:ss');//今天是2017/05/12 10:07:45

大功告成!

参考链接:
JavaScript 怎么快速声明一个数组

到此这篇关于javascript实现时间日期的格式化的方法汇总的文章就介绍到这了,更多相关javascript实现时间日期的格式化内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Jquery 组合form元素为json格式,asp.net反序列化
Jul 09 Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
Javascript实现基本运算器
Jul 15 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
leaflet加载geojson叠加显示功能代码
Feb 21 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 #Javascript
javascript读取本地文件和目录方法详解
Aug 06 #Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 #Javascript
javascript实现页面的实时时钟显示示例
Aug 06 #Javascript
Javascript如何递归遍历本地文件夹
Aug 06 #Javascript
通过vue刷新左侧菜单栏操作
Aug 06 #Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 #Javascript
You might like
php循环检测目录是否存在并创建(循环创建目录)
2011/01/06 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
jQuery JSON的解析方式分享
2011/04/05 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
2012/06/18 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
webpack4+react多页面架构的实现
2018/10/25 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
戴尔英国官网:Dell英国
2017/05/27 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
校运会宣传稿大全
2015/07/23 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python
Python使用scapy模块发包收包
2021/05/07 Python
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB