点此查看全部文字教程、视频教程、源代码

1. 前言

在前端获取当前日期、时间应该是高频使用场景了，但是JS提供的默认时间的格式往往不符合我们的需求，所以本文简单描述下JS下如何获取格式化的日期时间。

2. 格式化日期时间

看如下代码：

var date = new Date();
var year= date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
console.log([year, '-', month , '-', day].join(''));
console.log([year, '-', month , '-', day, ' ', hour , ':', minute, ':', second ].join(''));

通过new Date()即可获取当前时间，然后通过getFullYear等方法可以获取年月日、时分秒信息。

此处需要注意月份取值是0-11，所以需要加1才能转换为1-12月份。

最后我们输出常见的日期、日期时间的格式化字符串，一般来说日期使用-分割，时间使用:分割。

3. 封装为函数

也可以将获取格式化日期、格式化时间封装为函数。

function getFormatDate(){
   var date = new Date();
   var year= date.getFullYear();
   var month = date.getMonth() + 1;
   var day = date.getDate();
   return [year, '-', month , '-', day].join('');
}

function getFormatDateTime(){
	var date = new Date();
	var year= date.getFullYear();
	var month = date.getMonth() + 1;
	var day = date.getDate();
	var hour = date.getHours();
	var minute = date.getMinutes();
	var second = date.getSeconds();
	return [year, '-', month , '-', day, ' ', hour , ':', minute, ':', second ].join('');
}

4. 小结

注意JavaScript获取的日期时间是依赖于客户端的，有时候还需要在服务端进行下时间处理，毕竟服务端的时间我们是能保证相应的正确性的，而客户端嘛，更多的是讲究方便。

封装一个time.js文件，包含8种格式，需要传两个参数，时间戳str以及格式化的类型type，日期补零的方法用到es6语法中的padStart（length,‘字符’）,第一个参数是指定生成的字符串的最小长度，第二个参数是用来补全的字符串。如果没有指定第二个参数，默认用空格填充。需要注意的是需要将获取到的年月日转为字符串，可以直接拼接一个引号’’。

// type:0 =>2021-09-12 默认
// type:1 =>2021-09-12 10:34:12
// type:2 =>09-12 10:34:12
// type:3 =>09-12 
// type:4 =>2021/09/12 
// type:5 =>2021/09/12 10:34:12
// type:6 =>09/12 10:34:12
// type:7 =>09/12 
var filterTime = function(str,type = 0) {
	console.log('str',str)
	console.log('type',type)
	let date = new Date(str)
	let y = date.getFullYear();
	let m = (date.getMonth()+1 + '').padStart(2,'0');
	let d = (date.getDate() + '').padStart(2,'0');
	let hh = (date.getHours() + '').padStart(2,'0')
	let mm = (date.getMinutes() + '').padStart(2,'0')
	let ss = (date.getSeconds() + '').padStart(2,'0')
	let time;
	switch (type) {
	    case 0:
	        time = `${y}-${m}-${d}`;
	        break;
	    case 1:
			time = `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
	        break;
	    case 2:
	        time = `${m}-${d} ${hh}:${mm}:${ss}`;
	        break;
	    case 3:
	        time = `${m}-${d}`;
	        break;
	    case 4:
	        time = `${y}/${m}/${d}`;
	        break;
	    case 5:
	        time = `${y}/${m}/${d} ${hh}:${mm}:${ss}`;
	        break;
	    case 6:
	       time = `${m}/${d} ${hh}:${mm}:${ss}`;
	        break; 
		case 7:
	        time = `${m}/${d}`;
	        break;
	}
	return time;
}
export {
	filterTime
}

JS时间格式化

JS时间格式化

1.计算两个时间之间的间隔

const dayDif =(date1,date2)=>Math.ceil(Math.abs(date1.getTime()- date2.getTime())/ 86486000)

dayDif(new Date("2022-3-1"),new Date("2022-3-4"))//计算的是天数

2.查找日期位于一年中的第几天

该方法用于检测给出的日期位于今年的第几天:

const dayOfYear(date)=>Math.floor((date-new Date(date.getFullYear(),0,0))/ 1080 / 68 / 60 / 24):

dayOfYear(new Date()); //2021年已经过去300多天了~

3.时间格式化

该方法可以用于将时间转化为hourminutesseconds的格式

const timeFromDate = date => date.toTimeString().slice(e，8)

timeFromDate(new Date(2021112,12,300));//12:30108 timeFromDate(new Date());//这国当成时间89:08:03

day(new Date('2022-3-1'),new Date('2022-3-4'))