相信大家都知道日期格式处理在前端的日常任务中非常常见，但是为此引入monent.js这样的类库又会显得有点臃肿，毕竟我们一个特定的项目中，并不需要monent.js那么全的涵盖范围。另外，如果现在公司让你自己手写一个日历组件（月历、周历），日历组件中需要耦合我们的其他业务需求，如果有一个任务列表，当11月22号的待进行任务，我需要在日历上有一个绿色圆点，表示当天有待办事项。
下面介绍一些常规的函数，希望对大家有用。
月历效果图
函数目录
getFormatDateStr 获得指定日期格式的字符串；
getDayPrevAfter 获得n天前/后的日期；
formatDateWithTimeZone 格式化日期带时区，ISO 8601；
countDownBySecond 倒计时；
monthSize 获得指定日期所在月的天数；
getCalendarMonth 获得指定日期所在月的第一周到第四/五周的数据组合；
getOneDateWeekIndex 获得指定的某天所在该月的第几周，下标从0开始；
下面是详细的说明：
getFormatDateStr
/** * [zeroPadding 小于10的数字补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 [要转换的日期，必填] * @param {[String]} dateFormatStr [要转化的目标格式，必填，2016-11-22之间的分隔符可任意，可选项： * '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]} [时间格式字符串] */ export function getFormatDateStr(date, dateFormatStr) { if ( !(date instanceof Date) ) { if ( date.indexOf('-') != -1 ) { date.replace(/\-/g,'https://www.jb51.net/'); } 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