vue日期時間工具類詳解
更新時間：2022年06月24日 09:04:51 作者：談?wù)劦男那?
這篇文章主要為大家詳細介紹了vue日期時間工具類，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
最近做的一個項目對日期時間的處理比較多，最后整理到一個工具類里面，方便以后使用：
1. 在utils文件夾下新建一個dateTimeUtil.js文件：
// 獲取當前時間并格式化
export function getCurrentTime(){
? var date = new Date()
? var month = date.getMonth() + 1
? var day = date.getDate()
? if (month <= 9) {
? ? month = '0' + month
? }
? if (day <= 9) {
? ? day = '0' + day
? }
? return date.getFullYear() + '-' + month + '-' + day + ' ?' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
}
?
// 時間格式化
export function formatTime(v) {
? var date = new Date(v)
? var month = date.getMonth() + 1
? var day = date.getDate()
? if (month <= 9) {
? ? month = '0' + month
? }
? if (day <= 9) {
? ? day = '0' + day
? }
? return date.getFullYear() + '-' + month + '-' + day + ' ?' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
}
?
// 日期格式化
export function formatDate(v) {
? var date = new Date(v)
? var month = date.getMonth() + 1
? var day = date.getDate()
? if (month <= 9) {
? ? month = '0' + month
? }
? if (day <= 9) {
? ? day = '0' + day
? }
? return date.getFullYear() + '-' + month + '-' + day
}
?
// 獲取前、后n天 https://www.cnblogs.com/aoqizhonghua/p/11775982.html
export function getRangeDate(num, time){
? let n = num;
? let d = '';
? if (time) {
? ? d = new Date(time);
? } else {
? ? d = new Date();
? }
? let year = d.getFullYear();
? let mon = d.getMonth() + 1;
? let day = d.getDate();
? if(day <= n) {
? ? ? if(mon > 1) {
? ? ? ? ? mon = mon - 1;
? ? ? } else {
? ? ? ? ? year = year - 1;
? ? ? ? ? mon = 12;
? ? ? }
? }
? d.setDate(d.getDate() - n);
? year = d.getFullYear();
? mon = d.getMonth() + 1;
? day = d.getDate();
? let s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
? return s;
}
?
//獲取某個月的起始、終止日期
export function getMonthDate(y, m){
? let start = new Date(y, m-1, 1)
? let year = start.getFullYear();
? let mon = start.getMonth() + 1;
? let day = start.getDate();
? let startDate = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day)
?
? let end = new Date((new Date(y, m, 0).getTime() + 24*60*60*1000)-1)
? let year1 = end.getFullYear();
? let mon1 = end.getMonth() + 1;
? let day1 = end.getDate();
? let endDate = year1 + "-" + (mon1 < 10 ? ('0' + mon1) : mon1) + "-" + (day1 < 10 ? ('0' + day1) : day1)
?
? return startDate + ' —— ' + endDate
}
?
/*
? 當前日期是年的第幾周
? date1是當前日期
? date2是當年第一天
? d是當前日期是今年第多少天
? 用d + 當前年的第一天的周差距的和在除以7就是本年第幾周
*/
export function getYearWeek(a, b, c){
? var date1 = new Date(a, parseInt(b) - 1, c),
? ? ? date2 = new Date(a, 0, 1),
? ? ? d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000)
? ? ??
? return Math.ceil((d + ((date2.getDay() + 1) - 1)) / 7)
}
?
// 計算某年某周的日期范圍 https://blog.csdn.net/lyhuo/article/details/82661063
export function weekGetDate(year, weeks){
? var date = new Date(year, "0", "1")
? var time = date.getTime() // 獲取當前星期幾,0:星期一 ? ??
? var _week = date.getDay() ? ?//當這一年的1月1日為周日時則本年有54周,否則沒有54周,沒有則去除第54周的提示 ? ?
? if(_week!=0){//一年53周情況
? ? if(weeks==54){
? ? ? return '-1' //今年沒有54周
? ? } ? ?
? ? var cnt=0// 獲取距離周末的天數(shù) ? ?
? ? if(_week==0){
? ? ? cnt = 7 ?
? ? }else if(_week==1){
? ? ? cnt = 6 ?
? ? }else if(_week==2){ ??
? ? ? cnt = 5
? ? }else if(_week==3){ ??
? ? ? cnt = 4
? ? }else if(_week==4){ ? ?
? ? ? cnt = 3
? ? }else if(_week==5){ ? ?
? ? ? cnt = 2
? ? }else if(_week==6){ ? ?
? ? ? cnt = 1
? ? } ? ?
? ? cnt += 1//加1表示以星期一為一周的第一天 ? ?// 將這個長整形時間加上第N周的時間偏移 ? ?
? ? time += cnt*24*3600000 //第2周開始時間?
? ? var nextYear = new Date(parseInt(year,10)+1,"0","1") ?
? ? var nextWeek = nextYear.getDay()
? ? var lastcnt = 0//獲取最后一周開始時間到周末的天數(shù) ? ?
? ? if(nextWeek==0){ ? ?
? ? ? lastcnt = 6 ?
? ? }else if(nextWeek==1){ ? ?
? ? ? lastcnt = 0?
? ? }else if(nextWeek==2){ ? ?
? ? ? lastcnt = 1?
? ? }else if(nextWeek==3){?
? ? ? lastcnt = 2?
? ? }else if(nextWeek==4){ ? ?
? ? ? lastcnt = 3?
? ? }else if(nextWeek==5){ ? ?
? ? ? lastcnt = 4?
? ? }else if(nextWeek==6){ ? ?
? ? ? lastcnt = 5
? ? } ? ?
? ? if(weeks==1){//第1周特殊處理 ? ?// 為日期對象 date 重新設(shè)置成時間 time
? ? ? // var start = date.Format("yyyy-MM-dd");
? ? ? var start = date.toLocaleDateString().split('/').join('-')
? ? ? date.setTime(time-24*3600000)
? ? ? var end = date.toLocaleDateString().split('/').join('-')
? ? ? return start + "-----" + end
? ? }else if(weeks==53){//第53周特殊處理 ? ?
? ? ? var start = time+(weeks-2)*7*24*3600000 //第53周開始時間 ? ?
? ? ? var end = time+(weeks-2)*7*24*3600000 + lastcnt*24*3600000 - 24*3600000 //第53周結(jié)束時間
? ? ? date.setTime(start)
? ? ? // var _start = date.Format("yyyy-MM-dd");
? ? ? var _start = date.toLocaleDateString().split('/').join('-')
? ? ? date.setTime(end)
? ? ? // var _end = date.Format("yyyy-MM-dd");
? ? ? var _end = date.toLocaleDateString().split('/').join('-')
? ? ? return _start + "---" ?+ _end
? ? }else{ ? ?
? ? ? var start = time+(weeks-2)*7*24*3600000 //第n周開始時間 ? ?
? ? ? var end = time+(weeks-1)*7*24*3600000 - 24*3600000 //第n周結(jié)束時間
? ? ? date.setTime(start)
? ? ? // var _start = date.Format("yyyy-MM-dd");
? ? ? var _start = date.toLocaleDateString().split('/').join('-')
? ? ? date.setTime(end)
? ? ? // var _end = date.Format("yyyy-MM-dd");
? ? ? var _end = date.toLocaleDateString().split('/').join('-')
? ? ? return _start + "---" ?+ _end
? ? }?
? }else{//一年54周情況 ? ?
? ? var cnt=0// 獲取距離周末的天數(shù) ? ?
? ? if(_week==0 && weeks==1){//第一周 ? ?
? ? ? cnt = 0 ?
? ? }else if(_week==0){ ? ?
? ? ? cnt = 7?
? ? }else if(_week==1){ ? ?
? ? ? cnt = 6 ??
? ? }else if(_week==2){ ? ?
? ? ? cnt = 5?
? ? }else if(_week==3){ ? ?
? ? ? cnt = 4 ?
? ? }else if(_week==4){ ? ?
? ? ? cnt = 3
? ? }else if(_week==5){ ? ?
? ? ? cnt = 2 ?
? ? }else if(_week==6){ ? ?
? ? ? cnt = 1 ?
? ? } ? ?
? ? cnt += 1//加1表示以星期一為一周的第一天 ? ?
? ? // 將這個長整形時間加上第N周的時間偏移 ? ?
? ? time += 24*3600000 //第2周開始時間 ? ?
? ? var nextYear = new Date(parseInt(year,10)+1,"0","1") ??
? ? var nextWeek = nextYear.getDay() ??
? ? var lastcnt = 0 //獲取最后一周開始時間到周末的天數(shù) ? ?
? ? if(nextWeek==0){ ? ?
? ? ? lastcnt = 6
? ? }else if(nextWeek==1){ ? ?
? ? ? lastcnt = 0 ? ?
? ? }else if(nextWeek==2){?
? ? ? lastcnt = 1
? ? }else if(nextWeek==3){ ? ?
? ? ? lastcnt = 2
? ? }else if(nextWeek==4){ ? ?
? ? ? lastcnt = 3 ??
? ? }else if(nextWeek==5){ ? ?
? ? ? lastcnt = 4 ??
? ? }else if(nextWeek==6){ ? ?
? ? ? lastcnt = 5?
? ? } ? ?
? ? if(weeks==1){//第1周特殊處理
? ? ? // var start = date.Format("yyyy-MM-dd");
? ? ? var start = date.toLocaleDateString().split('/').join('-')
? ? ? date.setTime(time-24*3600000)
? ? ? alert(start +'--'+ date)
? ? ? return _start + "---" ?+ date
? ? }else if(weeks==54){//第54周特殊處理 ? ?
? ? ? var start = time+(weeks-2)*7*24*3600000 //第54周開始時間 ? ?
? ? ? var end = time+(weeks-2)*7*24*3600000 + lastcnt*24*3600000 - 24*3600000 //第53周結(jié)束時間
? ? ? date.setTime(start)
? ? ? // var _start = date.Format("yyyy-MM-dd");?
? ? ? var _start = date.toLocaleDateString().split('/').join('-')
? ? ? date.setTime(end)
? ? ? // var _end = date.Format("yyyy-MM-dd");
? ? ? var _end = date.toLocaleDateString().split('/').join('-')
? ? ? return _start + "---" ?+ _end
? ? }else{ ? ?
? ? ? var start = time+(weeks-2)*7*24*3600000 //第n周開始時間 ? ?
? ? ? var end = time+(weeks-1)*7*24*3600000 - 24*3600000 //第n周結(jié)束時間
? ? ? date.setTime(start)
? ? ? // var _start = date.Format("yyyy-MM-dd");
? ? ? var _start = date.toLocaleDateString().split('/').join('-')
? ? ? date.setTime(end)
? ? ? // var _end = date.Format("yyyy-MM-dd");
? ? ? var _end = date.toLocaleDateString().split('/').join('-')
? ? ? return _start + "---" ?+ _end
? ? } ? ?
? } ? ?
}
?
// 計算某年某月的日期范圍
export function monthGetDate(year, months) {
? var year = year
? var month = months
? month = month < 10 ? "0" + month: month
? var firstday = year + "-" + month + "-" + "01"
? var lastday = ""
? if (month == "01" || month == "03" || month == "05" || month == "07" || month == "08" || month == "10" || month == "12") {
? ? lastday = year + "-" + month + "-" + 31
? } else if (month == "02") {
? ? if ((year % 4 == 0 && year % 100 != 0) || (year % 100 == 0 && year % 400 == 0)) {
? ? ? lastday = year + "-" + month + "-" + 29
? ? } else {
? ? ? lastday = year + "-" + month + "-" + 28
? ? }
? } else {
? ? lastday = year + "-" + month + "-" + 30
? }
? return firstday + '---' + lastday
}
?
//生成隨機字符串方法
export function getString() {
? let time = new Date()
? time = time.getTime()
?
? return `${Math.random().toString(36).substr(2, 10)}${time}`
}
?
//升序排序
export function bubbleSortUp(arr, flag) {
? for (var i = 0; i < arr.length; i++) {
? ? for (var j = 0; j < arr.length - i - 1; j++) {
? ? ? if (arr[j][flag] > arr[j + 1][flag]) {
? ? ? ? var c = arr[j];
? ? ? ? arr[j] = arr[j + 1];
? ? ? ? arr[j + 1] = c;
? ? ? }
? ? }
? }
?
? return arr;
}
?
//降序排序
export function bubbleSortDown(arr, flag) {
? for (var i = 0; i < arr.length; i++) {
? ? for (var j = 0; j < arr.length - i - 1; j++) {
? ? ? if (arr[j][flag] < arr[j + 1][flag]) {
? ? ? ? var c = arr[j + 1];
? ? ? ? arr[j + 1] = arr[j];
? ? ? ? arr[j] = c;
? ? ? }
? ? }
? }
?
? return arr;
}
?
//減法精度處理
export function floatSub(arg1, arg2) {
? var r1, r2, m, n;
? try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }
? try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }
? m = Math.pow(10, Math.max(r1, r2));
? n = (r1 >= r2) ? r1 : r2;
?
? return ((arg1 * m - arg2 * m) / m).toFixed(n);
}2. 在需要的文件中引入使用：
獲取七天前的日期:
let day7 = util.getRangeDate(7)
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue3中使用sse最佳實踐,封裝工具,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
對于瀏覽器來說,文本、圖片等可以直接打開的文件,不會進行自動下載,下面這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)下載文件而非瀏覽器直接打開的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
組件是vue技術(shù)中非常重要的部分,組件使得與ui相關(guān)的輪子可以方便的制造和共享,進而使得vue使用者的開發(fā)效率大幅提升,這篇文章主要給大家介紹了關(guān)于uni-app自定義組件的相關(guān)資料,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了Vue實現(xiàn)接口進度條功能，在請求數(shù)據(jù)的過程中，需要添加監(jiān)聽函數(shù)來監(jiān)測數(shù)據(jù)請求的過程變化，并更新組件相應(yīng)的屬性和界面元素,本文結(jié)合實例代碼詳細講解，需要的朋友可以參考下2023-04-04
Pinia?是一個基于?Vue?3?的狀態(tài)管理庫，可以更好地支持?TypeScript?和更靈活的狀態(tài)管理方式，本文主要介紹了pinia的使用與持久化處理，需要的可以參考一下2023-07-07
Vue使用antd組件a-form-model實現(xiàn)數(shù)據(jù)連續(xù)添加功能
這篇文章主要介紹了Vue使用antd組件a-form-model實現(xiàn)數(shù)據(jù)連續(xù)添加功能,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
springboot和vue前后端交互的實現(xiàn)示例
本文主要介紹了springboot和vue前后端交互的實現(xiàn)示例,將包括一個簡單的Vue.js前端應(yīng)用程序,用于發(fā)送GET請求到一個Spring Boot后端應(yīng)用程序,以獲取并顯示用戶列表,感興趣的可以了解一下2024-05-05
vue在解析我們的組件時， 是通過打包成一個 js 文件，當我們的一個組件 引入過多子組件是，頁面的首屏加載時間 由最后一個組件決定 優(yōu)化的一種方式就是采用異步組件，這篇文章主要介紹了Vue3 異步組件 suspense,需要的朋友可以參考下2022-12-12
vue 獲取url參數(shù)、get參數(shù)返回數(shù)組的操作
這篇文章主要介紹了vue 獲取url參數(shù)、get參數(shù)返回數(shù)組的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Vue中父子組件的值傳遞與方法傳遞，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2020-09-09