Vue gets the current date and converts the date format into a date string, calculating the difference between the two times

In vue project development, it is often necessary to obtain the current time, and the date format obtained by the new Date() method does not meet our actual development needs. At this time, we need to obtain the date obtained by new Date() The format is converted into string format by two methods:

First of all: when using new Date(), there are two methods: passing parameters or not passing parameters. Without passing parameters, you get the current time. Passing parameters is often used to calculate the time difference between two dates.

console.log(new Date()) //Wed Sep 06 2023 16:07:56 GMT+0800 (中国标准时间)
console.log(new Date('2023-12-5 18:00:00'))//Tue Dec 05 2023 18:00:00 GMT+0800 (中国标准时间)

1. Get the current time and convert it into string format

①Use new Date()

onLoad() {
			let a = this.timeFormat()
			console.log(a) //2023-09-06 14:52:00
		},
methods: {
	timeFormat() {
	    let dateTime = new Date()
	    // 获取年份
	    let Y = dateTime.getFullYear() + '-'
		//获取当前年的月份 月份要 + 1 （0代表1月）date.getMonth() + 1
		let M = dateTime.getMonth() + 1 < 10 ? '0' + (dateTime.getMonth() + 1) + '-' : (dateTime.getMonth() + 1) +'-'
		//获取当前日（1 - 31）
		let D = dateTime.getDate() < 10 ? '0' + (dateTime.getDate()) + ' ' : (dateTime.getDate()) + ' '
		//获取当前小时（0-23）
		let h = dateTime.getHours() < 10 ? ('0' + dateTime.getHours() + ':') : (dateTime.getHours() + ':');
		//获取当前分钟（0-59）
		let m = dateTime.getMinutes() < 10 ? ('0' + dateTime.getMinutes() + ':') : (dateTime.getMinutes() + ':');
		//获取当前秒数（0-59）
		let s = dateTime.getSeconds() < 10 ? ('0' + dateTime.getSeconds()) : dateTime.getSeconds();
				return (Y + M + D + h + m + s)
			},

		}

②. Convert timestamp to date format

Before the function is implemented, let’s list several methods of converting date to timestamp.

let dateTime = Date.parse(new Date()); // 结果：1570517275000   不推荐 
let dateTime = (new Date()).valueOf(); // 结果： 1570517275069  推荐	
let dateTime = new Date().getTime(); // 结果：1570517275069  推荐

The implementation method is the same as in ①. You only need to replace the following sentence with let dateTime = new Date() above.

let dateTime = new Date(1628243435000)

2. Calculate time difference

Implementation principle: By converting two times into timestamps, the value obtained after subtraction is the difference in timestamps. You can obtain the time difference between the two times by running a few codes.

onLoad() {
			let a = this.timeFormat()
			console.log(a) //760天23时43分24秒
		},
		methods: {
			timeFormat() {
				let dateTime = 1628243435000
				let dateTime1 = new Date().getTime()
				// Math.floor()向下取整 时间戳获取到的是ms，ms和s之间为1000倍，一年360天，一天24小时，一小时60分钟，一分钟60秒

				let dateTime3 = dateTime1 - dateTime;
				let days = Math.floor(dateTime3 / (24 * 3600 * 1000))

				let leave1 = dateTime3 % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
				let hours = Math.floor(leave1 / (3600 * 1000))

				let leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
				let minutes = Math.floor(leave2 / (60 * 1000))

				let leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
				let seconds = Math.round(leave3 / 1000)

				return (days + '天' + hours + '时' + minutes + '分' + seconds + '秒')
			},
		}

Pay: The following code is simply a record, and you can use it if necessary. The following is the commonly used API for new Date() objects.

var myDate = new Date();  
myDate.getYear();  //获取当前年份  

myDate.getFullYear(); //获取完整的年份(4位,1970-????)  

myDate.getMonth(); //获取当前月份(0-11,0代表1月)     
// 所以获取当前月份是 myDate.getMonth()+1;   

myDate.getDate(); //获取当前日(1-31)  

myDate.getDay(); //获取当前星期X(0-6,0代表星期天)  

myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)  

myDate.getHours(); //获取当前小时数(0-23)  

myDate.getMinutes(); //获取当前分钟数(0-59)  

myDate.getSeconds(); //获取当前秒数(0-59)  

myDate.getMilliseconds(); //获取当前毫秒数(0-999)  

myDate.toLocaleDateString(); //获取当前日期 (如：2021/4/13)
    
myDate.toLocaleTimeString(); //获取当前时间  (如：下午2:42:45)   

myDate.toLocaleString( ); //获取日期与时间   （如：2021/4/13下午2:43:23）