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 相关文章推荐
JavaScript 学习笔记(六)
Dec 31 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
vue中使用vue-pdf的方法详解
Sep 05 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 字符串分割和比较
2009/10/06 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
jquery UI 1.72 之datepicker
2009/12/29 Javascript
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
layer实现关闭弹出层刷新父界面功能详解
2017/11/15 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
使用django实现一个代码发布系统
2019/07/18 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
Django框架模板用法入门教程
2019/11/04 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
国际书籍零售商:Wordery
2017/11/01 全球购物
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
校园报刊亭创业计划书
2014/01/02 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
企业读书活动总结
2014/06/30 职场文书
运动会表扬稿范文
2015/05/05 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
荒岛余生观后感
2015/06/09 职场文书
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL