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 DOM写的类似微博发布的效果
Oct 20 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 Javascript
vue2组件之select2调用的示例代码
Oct 12 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
微信小程序自定义胶囊样式
Dec 27 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面向对象public private protected 访问修饰符
2013/06/30 PHP
PHP伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
angularJS 入门基础
2015/02/09 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
全面了解js中的script标签
2016/07/04 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
浅析python的优势和不足之处
2018/11/20 Python
python mysql断开重连的实现方法
2019/07/26 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
销售助理岗位职责
2014/02/21 职场文书
行政副总岗位职责
2014/02/23 职场文书
小学生寒假家长评语
2014/04/16 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书