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 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
javascript实现获取字符串hash值
May 10 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 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数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
2014/12/31 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
使用Python的判断语句模拟三目运算
2015/04/24 Python
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
Python错误处理操作示例
2018/07/18 Python
对python字典过滤条件的实例详解
2019/01/22 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
python调用私有属性的方法总结
2020/07/24 Python
关于python中导入文件到list的问题
2020/10/31 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
互动出版网:专业书籍
2017/03/21 全球购物
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
本科毕业生的求职信范文
2013/11/20 职场文书
表演方阵解说词
2014/02/08 职场文书
产品销售计划书
2014/05/04 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
服务承诺书怎么写
2014/05/24 职场文书
仓管员岗位职责
2015/02/03 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript