前言
相信大家都知道日期格式处理在前端的日常任务中非常常见，但是为此引入monent.js这样的类库又会显得有点臃肿，毕竟我们一个特定的项目中，并不需要monent.js那么全的涵盖范围。另外，如果现在公司让你自己手写一个日历组件（月历、周历），日历组件中需要耦合我们的其他业务需求，如果有一个任务列表，当11月22号的待进行任务，我需要在日历上有一个绿色圆点，表示当天有待办事项。
下面介绍一些常规的函数，希望对大家有用。
月历效果图
函数目录
- getFormatDateStr 获得指定日期格式的字符串；
- getDayPrevAfter 获得n天前/后的日期；
- formatDateWithTimeZone 格式化日期带时区，ISO 8601；
- countDownBySecond 倒计时；
- monthSize 获得指定日期所在月的天数；
- getCalendarMonth 获得指定日期所在月的第一周到第四/五周的数据组合；
- getoneDateWeekIndex 获得指定的某天所在该月的第几周，下标从0开始；
下面是详细的说明：
getFormatDateStr
/**
- [_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,'/');
}
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}${sep<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>tor}${zeroPadding(month)}${sep<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>tor}${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}${sep<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>tor}${zeroPadding(month)}${sep<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>tor}${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)}${sep<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>tor}${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}${sep<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>tor}${zeroPadding(month)}${sep<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>tor}${zeroPadding(day)};
}
} else if ( /^mm(.{1})dd$/.test(dateFormatStr) ) {
if (_isDatestrseparatorCh(dateFormatStr)) {
returnStr = ${zeroPadding(month)}月${zeroPadding(day)}日;
} else {
separator = _getDatestrseparator(dateFormatStr,3);
returnStr = ${zeroPadding(month)}${sep<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>tor}${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
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
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
monthSize
getCalendarMonth
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,date: ${y}/${m}/${date}
};
}
} else if (i >= (firstDay + days)) {
let date = ++nextMonthDay;
if (m === 11 && date <= 7) {
_m[i] = {
isCurMonth: false,date: ${y + 1}/${1}/${date}
};
} else {
_m[i] = {
isCurMonth: false,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
总结
以上就是这篇文章的全部内容了，用上面的函数就能够实现日期格式转换，倒计时，自定义月历等常规的需要，希望对大家的学习或者工作能有一定的帮助，如果有疑问大家可以留言交流。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
