詳解js中常規(guī)日期格式處理、月歷渲染和倒計(jì)時(shí)函數(shù)
更新時(shí)間：2016年12月28日 08:38:39 作者：webCoder
大家在日常開發(fā)的時(shí)候經(jīng)常要用到日期格式的處理，下面這篇文章主要給大家介紹了js中常規(guī)日期格式處理、月歷渲染及倒計(jì)時(shí)函數(shù),有需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
前言
相信大家都知道日期格式處理在前端的日常任務(wù)中非常常見，但是為此引入monent.js這樣的類庫(kù)又會(huì)顯得有點(diǎn)臃腫，畢竟我們一個(gè)特定的項(xiàng)目中，并不需要monent.js那么全的涵蓋范圍。另外，如果現(xiàn)在公司讓你自己手寫一個(gè)日歷組件（月歷、周歷），日歷組件中需要耦合我們的其他業(yè)務(wù)需求，如果有一個(gè)任務(wù)列表，當(dāng)11月22號(hào)的待進(jìn)行任務(wù)，我需要在日歷上有一個(gè)綠色圓點(diǎn)，表示當(dāng)天有待辦事項(xiàng)。
下面介紹一些常規(guī)的函數(shù)，希望對(duì)大家有用。
月歷效果圖
函數(shù)目錄
- getFormatDateStr 獲得指定日期格式的字符串；
- getDayPrevAfter 獲得n天前/后的日期；
- formatDateWithTimeZone 格式化日期帶時(shí)區(qū)，ISO 8601；
- countDownBySecond 倒計(jì)時(shí)；
- monthSize 獲得指定日期所在月的天數(shù)；
- getCalendarMonth 獲得指定日期所在月的第一周到第四/五周的數(shù)據(jù)組合；
- getOneDateWeekIndex 獲得指定的某天所在該月的第幾周，下標(biāo)從0開始；
下面是詳細(xì)的說(shuō)明：
getFormatDateStr
/**
* [zeroPadding 小于10的數(shù)字補(bǔ)0，必填]
* @param {[Int]} value [description]
* @return {[String]} [description]
*/
export function zeroPadding(value){
return value < 10 ? `0${value}` : value;
}
/**
* [_isDateStrSeparatorCh 判斷日期格式字符串的分隔符是否是中文]
* @param {[String]} str [必填]
* @return {[String]} [分隔符]
*/
function _getDateStrSeparator(str, startIndex, endIndex) {
startIndex = startIndex ? startIndex : 4;
endIndex = endIndex ? endIndex : 5;
let separator = str.slice(startIndex, endIndex);
if (separator === '年' || separator === '月' ) {
separator = 'Ch';
}
return separator;
}
/**
* [_isDateStrSeparatorCh 判斷日期格式字符串的分隔符是否是中文]
* @param {[String]} str [必填]
* @return {[String]} [分隔符]
*/
function _isDateStrSeparatorCh(str) {
if ( str.indexOf('年')!=-1 || str.indexOf('月')!=-1 ) {
return true;
}
return false;
}
/**
* [getFormatDateStr 獲得指定日期格式的字符串]
* @param {[String or Date]} date [要轉(zhuǎn)換的日期，必填]
* @param {[String]} dateFormatStr [要轉(zhuǎn)化的目標(biāo)格式，必填，2016-11-22之間的分隔符可任意，可選項(xiàng)：
* 'yyyy-mm-dd hh:mm:ss','yyyy/mm/dd hh:mm:ss','yyyy.mm.dd hh:mm:ss','yyyy年mm月dd hh:mm:ss',
* 'yyyy-mm-dd hh:mm',
* 'mm-dd hh:mm',
* 'yyyy-mm-dd',
* 'mm-dd',
* 'hh:mm:ss',
* 'hh:mm'
* ]
* @return {[String]} [時(shí)間格式字符串]
*/
export function getFormatDateStr(date, dateFormatStr) {
if ( !(date instanceof Date) ) {
if ( date.indexOf('-') != -1 ) {
date.replace(/\-/g,'/');
}
date = new Date(date);
}
dateFormatStr = dateFormatStr.toLowerCase();
if (!dateFormatStr){
return false;
}
let returnStr = '',
separator = _getDateStrSeparator(dateFormatStr),
year = date.getFullYear(),
month = date.getMonth() + 1,
day = date.getDate(),
hour = date.getHours(),
minute = date.getMinutes(),
second = date.getSeconds();
if ( /^yyyy(.{1})mm(.{1})dd hh:mm:ss$/.test(dateFormatStr) ) {
if (_isDateStrSeparatorCh(dateFormatStr)) {
returnStr = `${year}年${zeroPadding(month)}月${zeroPadding(day)}日`;
} else {
separator =
returnStr = `${year}${separator}${zeroPadding(month)}${separator}${zeroPadding(day)}`;
}
returnStr += ` ${zeroPadding(hour)}:${zeroPadding(minute)}:${zeroPadding(second)}`;
} else if ( /^yyyy(.{1})mm(.{1})dd hh:mm$/.test(dateFormatStr) ) {
if (_isDateStrSeparatorCh(dateFormatStr)) {
returnStr = `${year}年${zeroPadding(month)}月${zeroPadding(day)}日`;
} else {
returnStr = `${year}${separator}${zeroPadding(month)}${separator}${zeroPadding(day)}`;
}
returnStr += ` ${zeroPadding(hour)}:${zeroPadding(minute)}`;
} else if ( /^mm(.{1})dd hh:mm$/.test(dateFormatStr) ) {
if (_isDateStrSeparatorCh(dateFormatStr)) {
returnStr = `${zeroPadding(month)}月${zeroPadding(day)}日`;
} else {
separator = _getDateStrSeparator(dateFormatStr, 2, 3);
returnStr = `${zeroPadding(month)}${separator}${zeroPadding(day)}`;
}
returnStr += ` ${zeroPadding(hour)}:${zeroPadding(minute)}`;
} else if ( /^yyyy(.{1})mm(.{1})dd$/.test(dateFormatStr) ) {
if (_isDateStrSeparatorCh(dateFormatStr)) {
returnStr = `${year}年${zeroPadding(month)}月${zeroPadding(day)}日`;
} else {
returnStr = `${year}${separator}${zeroPadding(month)}${separator}${zeroPadding(day)}`;
}
} else if ( /^mm(.{1})dd$/.test(dateFormatStr) ) {
if (_isDateStrSeparatorCh(dateFormatStr)) {
returnStr = `${zeroPadding(month)}月${zeroPadding(day)}日`;
} else {
separator = _getDateStrSeparator(dateFormatStr, 2, 3);
returnStr = `${zeroPadding(month)}${separator}${zeroPadding(day)}`;
}
} else if ( /^hh:mm:ss$/.test(dateFormatStr) ) {
returnStr = `${zeroPadding(hour)}:${zeroPadding(minute)}:${zeroPadding(second)}`;
} else if ( /^hh:mm$/.test(dateFormatStr) ) {
returnStr = `${zeroPadding(hour)}:${zeroPadding(minute)}`;
}
return returnStr;
}
getDayPrevAfter
/**
* [getDayPrevAfter 獲得n天前/后的日期]
* @param {[String]} date [日期，非必填參數(shù)，表示調(diào)用時(shí)的時(shí)間]
* @param {[String]} type [前一天還是后一天，非必填參數(shù)，默認(rèn)后一天]
* @param {[Int]} daysNum [天數(shù)，非必填參數(shù)，默認(rèn)一天]
* @return {[Date]} [description]
*/
export function getDayPrevAfter(date, type, daysNum) {
date = date ? date : new Date();
type = type ? type : 'after';
daysNum = daysNum ? daysNum : 1;
if ( !(date instanceof Date) ) {
if ( date.indexOf('-') != -1 ) {
date.replace(/\-/g,'/');
}
date = new Date(date);
}
let returnDate = date;
if (type === 'prev') {
returnDate = new Date(date.getTime() - (daysNum * 24 * 60 * 60 * 1000));
} else if (type === 'after') {
returnDate = new Date(date.getTime() + (daysNum * 24 * 60 * 60 * 1000));
}
return returnDate;
}
formatDateWithTimeZone
/**
* [formatDateWithTimeZone 格式化日期帶時(shí)區(qū)，ISO 8601]
* @param {[Date]} date [日期，非必填參數(shù)，表示調(diào)用時(shí)的時(shí)間]
* @return {[String]} [ISO 8601格式的日期，example: 2016-11-21T14:09:15+08:00]
*/
export function formatDateWithTimeZone(date) {
date = date ? date : new Date();
if ( !(date instanceof Date) ) {
if ( date.indexOf('-') != -1 ) {
date.replace(/\-/g,'/');
}
date = new Date(date);
}
let tzo = -date.getTimezoneOffset(),
dif = tzo >= 0 ? '+' : '-',
pad = function (num) {
let norm = Math.abs(Math.floor(num));
return zeroPadding(norm);
};
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}${dif}${pad(tzo / 60)}:${pad(tzo % 60)}`;
}
countDownBySecond
/**
* [countDownBySecond 倒計(jì)時(shí)]
* @param {[Int]} restSeconds [剩余秒數(shù)，必填]
* @param {[Int]} timeInterval [時(shí)間間隔，非必填，默認(rèn)1000ms]
* @param {[Function]} func [每倒計(jì)時(shí)一次，就需要執(zhí)行一次的回調(diào)函數(shù)名，非必填]
* @param {[Function]} endFun [倒計(jì)時(shí)結(jié)束需要執(zhí)行的函數(shù)名，非必填]
* @return {[null]} [無(wú)返回值]
*/
export function countDownBySecond(restSeconds, timeInterval, func, endCallback) {
let timer = null;
let total = restSeconds;
timeInterval = timeInterval ? timeInterval : 1000;
timer = setInterval(function() {
--total;
if (total <= 0) {
clearInterval(timer);
endCallback && endCallback();
}
func && func(total);
}, timeInterval);
}
monthSize
/**
* [monthSize 獲得指定日期所在月的天數(shù)]
* @param {[Date]} oDate [指定的日期，非必填，默認(rèn)為當(dāng)天]
* @return {[Int]} [總天數(shù)]
*/
function monthSize(oDate) {
oDate = oDate ? oDate : new Date();
let year = oDate.getFullYear(),
month = oDate.getMonth(),
_oDate = new Date();
_oDate.setFullYear(year);
_oDate.setMonth(month + 1, 0);
return _oDate.getDate();
}
getCalendarMonth
/**
* [getCalendarMonth 獲得指定日期所在月的第一周到第四/五周的數(shù)據(jù)組合，形如：
* [{
"date": "2016/10/30", //日期字符串
"dateNum": 30, //日
"isCurMonth": false, //是否當(dāng)前月
"weekIndex": 0 //是本月的第幾周，下標(biāo)從0開始
},{
"date": "2016/10/31",
"dateNum": 31,
"isCurMonth": false,
"weekIndex": 0
},{
"date": "2016/11/1",
"dateNum": 1,
"day": 2,
"isCurMonth": true,
"isToday": false,
"weekIndex": 0
}]
]
* @param {[Date]} param [指定的日期，非必填，默認(rèn)為當(dāng)天]
* @return {[Array]} [獲得指定日期所在月的第一周到第四/五周的數(shù)據(jù)組合]
*/
export function getCalendarMonth(date) {
date = date ? date : new Date();
let y = date.getFullYear();
let m = date.getMonth();
let _m;
let firstDay = new Date(y, m, 1).getDay(); //當(dāng)月第一天 周期
let days = monthSize(date);//當(dāng)月天數(shù)
let prevMonthDays = monthSize(new Date(y, m - 1));//上月天數(shù)
let initPrevDay = prevMonthDays - firstDay;
let lines = Math.ceil((firstDay + days) / 7);
_m = new Array(lines * 7);
let nextMonthDay = 0;
for (let i = 0; i < _m.length; i++) {
let weekIndex = parseInt(i / 7);
if (i < firstDay) {
let date = ++initPrevDay;
if (m === 0 && date > 7) {
_m[i] = {
isCurMonth: false,
dateNum: date,
weekIndex,
date: `${y - 1}/${12}/${date}`
};
} else {
_m[i] = {
isCurMonth: false,
dateNum: date,
weekIndex,
date: `${y}/${m}/${date}`
};
}
} else if (i >= (firstDay + days)) {
let date = ++nextMonthDay;
if (m === 11 && date <= 7) {
_m[i] = {
isCurMonth: false,
dateNum: date,
weekIndex,
date: `${y + 1}/${1}/${date}`
};
} else {
_m[i] = {
isCurMonth: false,
dateNum: date,
weekIndex,
date: `${y}/${m + 2}/${date}`
};
}
} else {
let _date = i - firstDay + 1;
let today = new Date();
let today_y = today.getFullYear();
let today_m = today.getMonth();
let today_d = today.getDate();
let isToday = today_y === y && today_m === m && today_d === _date ? true : false;
_m[i] = {
dateNum: _date, //日期
day: i % 7, //周期
weekIndex,
isCurMonth: true,
isToday,
date: `${y}/${m + 1}/${_date}`
};
}
}
return _m;
}
getOneDateWeekIndex
/**
* [getOneDateWeekIndex 獲得指定的某天所在該月的第幾周，下標(biāo)從0開始]
* @param {[Date]} date [指定的日期，非必填，默認(rèn)為當(dāng)天]
* @return {[Int]} [在該月的第幾周]
*/
export function getOneDateWeekIndex(date) {
date = date ? date : new Date();
let monthDays = getCalendarMonth(date);
let dateString = getFormatDateStr(date, '/', true, false, false);
let returnDate = monthDays.filter(item => {
return item.date === dateString;
});
let weekIndex = returnDate[0].weekIndex;
return weekIndex ? weekIndex : 0;
}
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，用上面的函數(shù)就能夠?qū)崿F(xiàn)日期格式轉(zhuǎn)換，倒計(jì)時(shí)，自定義月歷等常規(guī)的需要，希望對(duì)大家的學(xué)習(xí)或者工作能有一定的幫助，如果有疑問大家可以留言交流。
相關(guān)文章
JavaScript數(shù)字?jǐn)?shù)組的13個(gè)實(shí)用小技巧
數(shù)組是JS最常見的一種數(shù)據(jù)結(jié)構(gòu),咱們?cè)陂_發(fā)中也經(jīng)常用到,在這篇文章中,提供一些小技巧,幫助咱們提高開發(fā)效率,這篇文章主要給大家分享介紹了關(guān)于JavaScript數(shù)字?jǐn)?shù)組的13個(gè)實(shí)用小技巧,需要的朋友可以參考下2023-11-11
JS Object.preventExtensions(),Object.seal()與Object.freeze()用
這篇文章主要介紹了JS Object.preventExtensions(),Object.seal()與Object.freeze()用法,結(jié)合實(shí)例形式分析了javascript控制對(duì)象擴(kuò)展、密封、凍結(jié)等相關(guān)函數(shù)與操作技巧,需要的朋友可以參考下2018-08-08
EasyUI彈出框行編輯如何通過(guò)下拉框?qū)崿F(xiàn)內(nèi)容聯(lián)動(dòng)
本文介紹了如何使用EasyUI彈出框和下拉框?qū)崿F(xiàn)內(nèi)容聯(lián)動(dòng),并詳細(xì)描述了當(dāng)用戶選擇下拉框時(shí)如何更新當(dāng)前行數(shù)據(jù),通過(guò)解決datagrid的onClickRow和onClickCell事件不觸發(fā)的問題,實(shí)現(xiàn)了下拉框選擇后數(shù)據(jù)的自動(dòng)填充2024-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序下拉框組件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)彈球游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
用腳本調(diào)用樣式的幾種方法...2006-12-12
three.js利用卷積法如何實(shí)現(xiàn)物體描邊效果
這篇文章主要給大家介紹了關(guān)于three.js利用卷積法如何實(shí)現(xiàn)物體描邊效果的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用three.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
一文詳解requestAnimationFrame請(qǐng)求動(dòng)畫幀
requestAnimationFrame是一個(gè)用于動(dòng)畫效果的 API,它使用瀏覽器的刷新率來(lái)執(zhí)行回調(diào)函數(shù),通常每秒鐘執(zhí)行60次,這篇文章主要給大家介紹了關(guān)于requestAnimationFrame請(qǐng)求動(dòng)畫幀的相關(guān)資料,需要的朋友可以參考下2023-12-12
JavaScript的Number對(duì)象的toString()方法
toString()方法可以把Number對(duì)象轉(zhuǎn)換成字符串，并返回此字符串，本文給大家介紹JavaScript的Number對(duì)象的toString()方法，對(duì)javascript對(duì)象方法相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12
構(gòu)建樹控件的比較理想的一種方法是用ul、li這種簡(jiǎn)單的標(biāo)簽組合來(lái)實(shí)現(xiàn)，但是你如果想實(shí)現(xiàn)復(fù)雜一點(diǎn)的比如要節(jié)點(diǎn)可編輯、可拖動(dòng)、可更換風(fēng)格等等我想ExtJS是最好的選擇了。2009-06-06