前端移動端常用的時間格式化函式,相容性已處理
阿新 • • 發佈：2020-10-05
// 把時間轉換成自己想要的格式 export const dateFormat = (t, str) => { // 處理t的預設值 if (!t) t = new Date() // 強制轉換型別, 防止使用者輸入的不是時間 t = t + '' // 處理ios的相容性 if (t.includes('-')) { t = t.replace(/-/g, '/') } // 以地圖的形式獲取 時間 var map = { yyyy: new Date(t).getFullYear(), MM: (new Date(t).getMonth() + 1 + '').padStart(2, '0'), dd: (new Date(t).getDate() + '').padStart(2, '0'), hh: (new Date(t).getHours() + '').padStart(2, '0'), mm: (new Date(t).getMinutes() + '').padStart(2, '0'), ss: (new Date(t).getSeconds() + '').padStart(2, '0') } console.log('傳入的格式為' + str) // 判斷使用者是否輸入了時間格式 if (!str || !str.length) { return`${map.yyyy}-${map.MM}-${map.dd} ${map.hh}:${map.mm}:${map.ss}` } // 使用者輸入了 時間格式 let time = str // 判斷是否包含年份 if (time.includes('yyyy')) { time = time.replace('yyyy', map.yyyy) } // 判斷是否包含月份 if (time.includes('MM')) { time = time.replace('MM', map.MM) } // 判斷是否包含日期 if (time.includes('dd')) { time= time.replace('dd', map.dd) } // 判斷是否包含小時 if (time.includes('hh')) { time = time.replace('hh', map.hh) } // 判斷是否包含日期 if (time.includes('mm')) { time = time.replace('mm', map.mm) } // 判斷是否包含日期 if (time.includes('ss')) { time = time.replace('ss', map.ss) } return time } // 獲取使用時長 export const getUsingTime = (timeStart, timeEnd, timeStr) => { // 防止沒有輸入時間,從而引起報錯 if (!timeStart || !timeEnd) return '--:--:--' // 強行轉換格式 timeStart = timeStart + '' timeEnd = timeEnd + '' // 解決IOS相容性問題 if (timeStart.includes('-')) { timeStart = timeStart.replace(/-/g, '/') } if (timeEnd.includes('-')) { timeEnd = timeEnd.replace(/-/g, '/') } const tem = new Date(timeEnd).getTime() - new Date(timeStart).getTime() // 判度時間是否小於零 if (tem <= 0) return '00:00:00' const map = { hh: (parseInt(tem / 1000 / 60 / 60) + '').padStart(2, '0'), mm: (parseInt((tem / 1000 / 60) % 60) + '').padStart(2, '0'), ss: (parseInt((tem / 1000) % 60) + '').padStart(2, '0'), MM: (parseInt(tem / 1000 / 60) + '').padStart(2, '0') } // 根據使用者傳遞的字串模板, 返回對應的時間 // 使用者沒有傳遞時間格式, 返回預設格式 if (!timeStr) { return `${map.hh}:${map.mm}:${map.ss}` } // 傳遞了格式, 但是沒有包含小時, 把小時合併進分鐘數中 let str = timeStr if (!str.includes('hh')) { if (str.includes('mm')) { str = str.replace('mm', map.MM) } if (str.includes('ss')) { str = str.replace('ss', map.ss) } return str } // 否則根據使用者傳遞的時分秒, 進行全部替換 if (str.includes('hh')) { str = str.replace('hh', map.hh) } if (str.includes('mm')) { str = str.replace('mm', map.mm) } if (str.includes('ss')) { str = str.replace('ss', map.ss) } return str } // 獲取指定的日期 export const getAppointDate = (day, timeStr) => { // 如果沒有傳遞時間或者傳遞的時間為false或者null或者 '', 預設獲取今天林晨的時間 // 1. 沒傳天數, 且 沒傳需要的時間格式, 返回 今天的 預設的時間格式 if (!day && !timeStr) { const yyyy = new Date().getFullYear() const mm = (new Date().getMonth() + 1 + '').padStart(2, '0') const dd = (new Date().getDate() + '').padStart(2, '0') return `${yyyy}-${mm}-${dd} 00:00:00` } // 天數傳遞的boolean值為false, 但是傳遞了時間格式 if (!day && timeStr) { let str = timeStr const yyyy = new Date().getFullYear() const mm = (new Date().getMinutes() + 1 + '').padStart(2, '0') const dd = (new Date().getDate() + '').padStart(2, '0') if (str.includes('yyyy')) { str = str.replace('yyyy', yyyy) } if (str.includes('mm')) { str = str.replace('mm', mm) } if (str.includes('dd')) { str = str.replace('dd', dd) } return str } // 傳大於零的天數 但是沒傳時間字元 const tem = new Date().getTime() + day * 24 * 60 * 60 * 1000 const t = new Date(tem) const yyyy = t.getFullYear() const mm = (t.getMonth() + 1 + '').padStart(2, '0') const dd = (t.getDate() + '').padStart(2, '0') if (!timeStr) { return `${yyyy}-${mm}-${dd} 00:00:00` } else { let str = timeStr if (str.includes('yyyy')) { str = str.replace('yyyy', yyyy) } if (str.includes('mm')) { str = str.replace('mm', mm) } if (str.includes('dd')) { str = str.replace('dd', dd) } return str } }
下面的一個說明文件 用md 寫的, 瀏覽器看著會很亂
### 最近發現時間格式化用得有點頻繁, 所以自己寫了一個時間格式化的庫, 方便工作中使用 相容性方面, 相容了 IOS 系統 對於 2020-12-00 12:00:00 這種格式的時間無法正常解析的問題 但是很多 UI 返回的時間, 依舊需要進行手動處理, 比如前段時間我用 mintui 的時間選擇器 picker , 返回的時間格式, 在 Android 上面正常解析為時間, 但是在 IOS 上面並不行, 不一定能是-的問題, 也有可能是你傳入的時間,別人 IOS 根本無法使用時間函式 _使用方式_ ```js 1. 在 vue 中使用 import 匯入 import { dateFormat } from '../utils/dateFormat.js' 2. 在需要處理的地方呼叫 ``` #### 函式 dateFormat 用於獲取指定格式的時間 ##### 1. 不傳入任何引數, 直接呼叫 預設獲取當前的時間, 格式為 `2020-10-04 16:30:39` ```js // 呼叫 const res = dateFormat() console.log(res) // 返回結果 2020-10-04 16:30:39 ``` ##### 2. 傳入時間, 不傳遞格式 如果沒有攜帶時分秒, 獲取的為, 傳遞的日期的 零時零分零秒時間, 格式為 `2020-12-20 00:00:00` ```js // 呼叫 const res = dateFormat('2020-12-20') console.log(res, 'res') // 返回結果 2020-12-20 00:00:00 ``` ##### 3. 傳入時間, 並且攜帶需要的時間格式 ###### 引數說明 yyyy ======== 年份 MM ========= 月份(已經加 1) dd ========== 日 hh ========== 小時 mm ========== 分鐘 ss ========== 秒 ###### 說明: 引數傳遞根據自己的需求進行組合 ```js 例如我需要 2020年12月24日中午十二點的時間字元, 如下 24-12-2020 12:00:00 只需要傳遞 'dd-MM-yyyy hh:mm:ss' 再例如我需要漢字的組成的 2020年12分20號 只需要傳遞 'yyyy年MM月dd號' ``` ```js // 呼叫 const res = dateFormat('2020-12-20', 'yyyy-MM-dd hh:mm:ss') console.log(res) // 得到的結果為 2020-12-20 00:00:00 // 呼叫 const res = dateFormat('2020-12-20', 'dd-MM-yyyy hh:mm:ss') console.log('返回的格式為' + res) // 列印得到的結果 返回的格式為20-12-2020 00:00:00 // 呼叫 const res = dateFormat('2020-12-20', 'yyyy年MM月dd號') console.log(res) // 得到的結果為 2020年12月20號 ``` #### 函式 getUsingTime 獲取使用者使用的時長 ##### 引數(timeStart,timeEnd,timeStr) timeStart: 開始使用的時間(必填引數) timeEnd: 結束使用的時間(必填引數, 沒有傳 null 或者 false 或著'') timeStr: 預設 'hh:mm:ss', 可選引數 'hh:mm' 或者 'mm:ss' 可以根據自己需求進行替換, 例如 傳入 'hh 小時 mm 分鐘', 'mm 分鐘 ss 秒' **注意** 只傳分和秒的時候, 會預設把小時計算進分鐘數中 ```js // 呼叫 const res = getUsingTime('2020-10-04 12:00:00', '2020-10-04 13:45:56') console.log(res) // 列印結果 01:45:56 // 呼叫 const res = getUsingTime( '2020-10-04 12:00:00', '2020-10-04 13:45:56', 'mm分鐘ss秒' ) console.log(res) // 列印結果 105分鐘56秒 // 呼叫 const res = getUsingTime( '2020-10-04 12:00:00', '2020-10-04 13:45:56', 'hh:mm:ss' ) console.log(res) // 列印結果 01:45:56 // 呼叫 const res = getUsingTime( '2020-10-04 12:00:00', '2020-10-04 13:45:56', 'hh小時mm分' ) console.log(res) // 列印結果 01小時45分 ``` #### 函式 getAppointDate(day, 'yyyy-mm-dd 00:00:00') 用於獲取指定天數之前或者之後或者今天的,預設格式的時間或者指定格式的時間 **注意** 該函式不會處理時分秒, 預設返回的都是當天凌晨的 時間 引數 day: 等於 0 獲取今天凌晨的時間, 大於 0, 獲取幾天後的凌晨時間, 小於零, 獲取幾天之前的時間 'yyyy-mm-dd 00:00:00': 需要的時間格式, 只會替換 yyyy 和 mm 和 dd, 後面根據自己需求加字尾 ```js // 呼叫 const ret = getAppointDate() console.log(ret) // 列印結果 2020-10-05 00:00:00 // 呼叫 // 當前時間 2020/10/05 // 獲取兩天後的時間 const ret = getAppointDate(2) console.log(ret) // 列印結果 2020-10-07 00:00:00 // 呼叫 獲取七天之前的日期 const ret = getAppointDate(-7) console.log(ret) // 得到 2020-09-28 00:00:00 // 呼叫 傳遞格式 const ret = getAppointDate(-7, 'yyyy-mm-dd') console.log(ret) // 列印得到的結果 2020-09-28 ```//把時間轉換成自己想要的格式 exportconstdateFormat=(t,str)=>{ //處理t的預設值 if(!t)t=newDate() //強制轉換型別,防止使用者輸入的不是時間 t=t+'' //處理ios的相容性 if(t.includes('-')){ t=t.replace(/-/g,'/') } //以地圖的形式獲取時間 varmap={ yyyy:newDate(t).getFullYear(), MM:(newDate(t).getMonth()+1+'').padStart(2,'0'), dd:(newDate(t).getDate()+'').padStart(2,'0'), hh:(newDate(t).getHours()+'').padStart(2,'0'), mm:(newDate(t).getMinutes()+'').padStart(2,'0'), ss:(newDate(t).getSeconds()+'').padStart(2,'0') } console.log('傳入的格式為'+str) //判斷使用者是否輸入了時間格式 if(!str||!str.length){ return`${map.yyyy}-${map.MM}-${map.dd}${map.hh}:${map.mm}:${map.ss}` } //使用者輸入了時間格式 lettime=str //判斷是否包含年份 if(time.includes('yyyy')){ time=time.replace('yyyy',map.yyyy) } //判斷是否包含月份 if(time.includes('MM')){ time=time.replace('MM',map.MM) } //判斷是否包含日期 if(time.includes('dd')){ time=time.replace('dd',map.dd) } //判斷是否包含小時 if(time.includes('hh')){ time=time.replace('hh',map.hh) } //判斷是否包含日期 if(time.includes('mm')){ time=time.replace('mm',map.mm) } //判斷是否包含日期 if(time.includes('ss')){ time=time.replace('ss',map.ss) } returntime }
//獲取使用時長 exportconstgetUsingTime=(timeStart,timeEnd,timeStr)=>{ //防止沒有輸入時間,從而引起報錯 if(!timeStart||!timeEnd)return'--:--:--' //強行轉換格式 timeStart=timeStart+'' timeEnd=timeEnd+'' //解決IOS相容性問題 if(timeStart.includes('-')){ timeStart=timeStart.replace(/-/g,'/') }
if(timeEnd.includes('-')){ timeEnd=timeEnd.replace(/-/g,'/') }
consttem=newDate(timeEnd).getTime()-newDate(timeStart).getTime() //判度時間是否小於零 if(tem<=0)return'00:00:00' constmap={ hh:(parseInt(tem/1000/60/60)+'').padStart(2,'0'), mm:(parseInt((tem/1000/60)%60)+'').padStart(2,'0'), ss:(parseInt((tem/1000)%60)+'').padStart(2,'0'), MM:(parseInt(tem/1000/60)+'').padStart(2,'0') } //根據使用者傳遞的字串模板,返回對應的時間 //使用者沒有傳遞時間格式,返回預設格式 if(!timeStr){ return`${map.hh}:${map.mm}:${map.ss}` } //傳遞了格式,但是沒有包含小時,把小時合併進分鐘數中 letstr=timeStr if(!str.includes('hh')){ if(str.includes('mm')){ str=str.replace('mm',map.MM) } if(str.includes('ss')){ str=str.replace('ss',map.ss) } returnstr } //否則根據使用者傳遞的時分秒,進行全部替換 if(str.includes('hh')){ str=str.replace('hh',map.hh) } if(str.includes('mm')){ str=str.replace('mm',map.mm) } if(str.includes('ss')){ str=str.replace('ss',map.ss) } returnstr }
//獲取指定的日期 exportconstgetAppointDate=(day,timeStr)=>{ //如果沒有傳遞時間或者傳遞的時間為false或者null或者'',預設獲取今天林晨的時間
//1.沒傳天數,且沒傳需要的時間格式,返回今天的預設的時間格式 if(!day&&!timeStr){ constyyyy=newDate().getFullYear() constmm=(newDate().getMonth()+1+'').padStart(2,'0') constdd=(newDate().getDate()+'').padStart(2,'0') return`${yyyy}-${mm}-${dd}00:00:00` } //天數傳遞的boolean值為false,但是傳遞了時間格式 if(!day&&timeStr){ letstr=timeStr constyyyy=newDate().getFullYear() constmm=(newDate().getMinutes()+1+'').padStart(2,'0') constdd=(newDate().getDate()+'').padStart(2,'0') if(str.includes('yyyy')){ str=str.replace('yyyy',yyyy) } if(str.includes('mm')){ str=str.replace('mm',mm) } if(str.includes('dd')){ str=str.replace('dd',dd) }
returnstr }
//傳大於零的天數但是沒傳時間字元 consttem=newDate().getTime()+day*24*60*60*1000 constt=newDate(tem) constyyyy=t.getFullYear() constmm=(t.getMonth()+1+'').padStart(2,'0') constdd=(t.getDate()+'').padStart(2,'0') if(!timeStr){ return`${yyyy}-${mm}-${dd}00:00:00` }else{ letstr=timeStr if(str.includes('yyyy')){ str=str.replace('yyyy',yyyy) } if(str.includes('mm')){ str=str.replace('mm',mm) } if(str.includes('dd')){ str=str.replace('dd',dd) } returnstr } }