前端时间格式化,总结篇

441 阅读1分钟

常见的js处理时间戳,需要用javascript 去拼接处理!

今天想获取一个时间字符串(2022-05-22 00:00:00),去搜索列表

首先new Date() 去获取,发现获取的都是些时间戳,不是自己想要的:

new Date 常见的API

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)   

写函数去格式化


function formatDate(date) {
console.log(date);
// date = new Date();
date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Data();
console.log(date);
var y = date.getFullYear();
console.log(y);
var m = date.getMonth() + 1;
m = m < 10 ? '0' + m : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
return y + '-' + m + '-' + d;
}

这种代码量太大不容易维护,一般vue建议直接用dayjs库

image.png

在使用之前,必须要先引入下库

image.png

附上代码

 // 获取当前时间并且时间格式化成  'YYYY-MM-DD'
let startDate = dayjs(new Date().toLocaleDateString()).format('YYYY-MM-DD')+" 00:00:00"
 let endDate = dayjs(new Date().toLocaleDateString()).format('YYYY-MM-DD')+" 23:59:59"