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 (用setTimeout而非setInterval)
Dec 28 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 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
php 函数使用方法与函数定义方法
2010/05/09 PHP
php url地址栏传中文乱码解决方法集合
2010/06/25 PHP
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
javascript延时加载之defer测试
2012/12/28 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
Vue.js 中的 v-show 指令及用法详解
2018/11/19 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
Python中os.path用法分析
2015/01/15 Python
连接Python程序与MySQL的教程
2015/04/29 Python
Ubuntu下安装PyV8
2016/03/13 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
python生成器与迭代器详解
2019/01/01 Python
Django模板Templates使用方法详解
2019/07/19 Python
python Kmeans算法原理深入解析
2019/08/23 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
python中Mako库实例用法
2020/12/31 Python
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
财务会计专业求职信范文
2013/12/31 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python