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 validate.js表单验证的基本用法入门
May 13 Javascript
获取3个数组不重复的值的具体实现
Dec 30 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 Javascript
JavaScript模块详解
Dec 18 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
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
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
JavaScript事件列表解说
2006/12/22 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
小程序外卖订单界面的示例代码
2019/12/30 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
python机器学习之神经网络(二)
2017/12/20 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
财务会计专业求职信范文
2013/12/31 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
初中学校军训方案
2014/05/09 职场文书
音乐教师求职信
2014/06/28 职场文书
纪律教育月活动总结
2014/08/26 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
故意伤害辩护词
2015/05/21 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python