序

相信大家都知道，日期格式处理在前端日常任务中非常常见，但是为此引入monent.js这样的类库会有点臃肿。毕竟，我们不需要在特定项目中全面覆盖monent.js。此外，如果公司现在允许您自己编写日历组件(月历和周历)，则需要在日历组件中耦合其他业务需求。如果有任务清单，11月22日任务要做的时候，我需要日历上有一个绿点，表示当天有待办事项。

下面介绍一些常规功能，希望对大家有用。

月历效果图

功能目录

GetFormatDateStr获取指定日期格式的字符串；获取n天之前/之后的日期；格式化日期带时区格式化日期带时区，ISO 8601；倒数第二秒；MonthSize获取指定日期所在月份的天数；GetCalendarMonth获取指定日期所在月份的第一周到第四/五周的数据组合；GetOneDateWeekIndex获取指定日期所在月份的周，下标从0开始；以下是详细描述：

getFormatDateStr

/* * *[零填充小于10的数字补0,必填]* @ param {[Int]}值[说明]* @ return {[String]}[说明]*/export函数零填充(值){ 0返回值10?` 0${value}` :值；}/** * [_isDateStrSeparatorCh判断日期格式字符串的分隔符是否是中文] * @param {[String]} str [必填] * @return {[String]} [分隔符]*/function _ getDateStrSeparator(str，startIndex，endIndex){ startIndex=startIndex？startIndex : 4；endIndex=endIndex？endIndex : 5；让分隔符=str.slice(startIndex，endIndex)；如果(分隔符==='年||分隔符==='月){分隔符=' Ch}返回分隔符；}/** * [_isDateStrSeparatorCh判断日期格式字符串的分隔符是否是中文] * @param {[String]} str [必填] * @return {[String]} [分隔符]*/function _ IsdatestrseParatorch(str){ if(str。索引of('年')!=-1 || str.indexOf('月')!=-1 ) {返回真}返回false}/** * [getFormatDateStr获得指定日期格式的字符串]* @ param {[字符串或日期]}日期[要转换的日期，必填]* @ param {[String]} DateformatStr[要转化的目标格式，必填，2016-11-22之间的分隔符可任意，可选项*"yyyy-mm-DD hh :mm 3360s "、" yyy . mm . DD hh :mm 3360s "、" yyy。mm . DD hh :mm 3360s "、" yyyy "年毫米月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]}[时间格式字符串]*/导出函数getFormatDateStr(日期，日期格式字符串){ if(！（日期的日期实例){ if (date.indexOf('-')！=-1 ) { date.replace(/-/g，'/')；}日期=新日期(日期)；} dateFormatStr=dateFormatStr。tolowercase()；if(！dateFormatStr){ return false；}让returnStr=' '，分隔符=_ getdatestrspartor(dateFormatStr)，year=date.getFullYear()，month=date.getMonth() 1，day=date.getDate()，hour=date.getHours()，minute=date.getMinutes()，second=date。getseconds()；if (/^yyyy(.{1})毫米(。{ 1 })DD hh :mm :s $/.test(dateFormatStr)){ if(_ is datestrsepartorch(dateFormatStr)){ returnStr=`$ { year }年$ {零填充（月)}月$ {零填充（天)}日`;} else { separator=returnStr=` $ { year } $ { separator } $ { zero padding(月)} $ {分隔符} $ {零填充(日)} `;} returnStr=` ${zeroPadding(小时)}:${zeroPadding(分钟)}:${zeroPadding(秒)} `;}否则如果(/^yyyy(.{1})毫米(。{1})dd hh:mm$/.test(dateFormatStr)){ if(_ is datestrsepartorch(dateFormatStr)){ returnStr=`$ { year }年$ {零填充（月)}月$ {零填充（天)}日`;} else { returnStr=` $ { year } $ { separator } $ { zero padding(月)} $ {分隔符} $ {零填充(日)} `;} returnStr=` ${zeroPadding(小时)}:${zeroPadding(分钟)} `;}否则如果(/^mm(.{1})dd hh:mm$/.test(dateFormatStr)){ if(_ is datestrsepartorch(dateFormatStr)){ returnStr=`$ {零填充(月)}月$ {零填充（天)}日`;} else { separator=_ getDateStrSeparator(date format str，2，3)；returnStr=`${zeroPadding(月)} $ {分隔符} $ {零填充(日)} `;} returnStr=` ${zeroPadding(小时)}:${zeroPadding(分钟)} `;}否则如果(/^yyyy(.{1})毫米(。{1})dd$/.test(dateFormatStr)){ if(_ is datestrsepartorch(dateFormatStr)){ returnStr=`$ { year }年$ {零填充（月)}月$ {零填充（天)}日`;} else { returnStr=` $ { year } $ { separator } $ { zero padding(月)} $ {分隔符} $ {零填充(日)} `;} } else if (/^mm(.{1})dd$/.test(dateFormatStr)){ if(_ is datestrsepartorch(dateFormatStr)){ returnStr=`$ {零填充(月)}月$ {零填充（天)}日`;} else { separator=_ getDateStrSeparator(date format str，2，3)；returnStr=`${zeroPadding(月)} $ {分隔符} $ {零填充(日)} `;} } else if (/^hh:mm:ss$/.test(dateFormatStr)){ returnStr=` $ {零填充(小时)}:${zeroPadding(分钟)}:${zeroPadding(秒)} `;}否则如果(/^hh:mm$/.test(dateFormatStr)){ returnStr=` $ {零填充(小时)}:${zeroPadding(分钟)} `;returnStr返回；} getdayprevalafter

/* * *[getdaypreafter获得n天前/后的日期]* @ param {[字符串]}日期[日期，非必填参数，表示调用时的时间]* @ param {[字符串]}类型[前一天还是后一天，非必填参数，默认后一天] * @param {[Int]} daysNum [天数，非必填参数，默认一天]* @返回{[日期]}[描述]*/导出函数getDayPrevAfter(日期、类型、天数)日期=日期？日期：新日期();类型=类型？键入：“后”；daysNum=daysNum？天数num : 1；if(！（日期的日期实例){ if (date.indexOf('-')！=-1 ) { date.replace(/-/g，'/')；}日期=新日期(日期)；}让返回日期=日期(类型==' prev '){返回日期=新日期(日期。gettime()-(天数数* 24 * 60 * 60 * 1000))；} else if(类型==='在'){ returnDate=新日期(Date。gettime()(daysNum * 24 * 60 * 60 * 1000))；} return returnDate}格式化日期时区

/* * *[格式化日期带时区格式化日期带时区，ISO 8601]* @ param {[日期]}日期[日期，非必填参数，表示调用时的时间]* @返回{[字符串]} [ISO 8601格式的日期，示例： 2016-11-21t 14:09:15]08:00]*/export函数formatdatewitthtime区域(日期){ date=date？日期：新日期();if(！（日期的日期实例){ if (date.indexOf('-')！=-1 ) { date.replace(/-/g，'/')；}日期=新日期(日期)；}让tzo=-date.getTimezoneOffset()，dif=tzo=0？ '-'，pad=function(num){ let norm=math。ABS(数学。楼层(数量))；返回零填充(规范)；};返回` $ { 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

/* * *[counttowbysecond倒计时] * @param {[Int]} restSeconds [剩余秒数，必填] * @param {[Int]}时间间隔[时间间隔，非必填，默认1000毫秒]* @ param {[函数]}功能[每倒计时一次，就需要执行一次的回调函数名，非必填] * @param {[Function]} endFun [倒计时结束需要执行的函数名，非必填] * @return {[null]} [无返回值]*/导出函数countdowbysecond(休息秒、时间间隔、函数、结束回调){ 0让定时器=空让总计=RESTs秒时间间隔=时间间隔？时间间隔： 1000;timer=setInterval(function(){-total；if (total=0) { clearInterval(定时器);endCallback endCallback()；} func func(总计);}，时间间隔)；}monthSize

/* * *[蒙西泽获得指定日期所在月的天数]* @ param {[Date]} HuIt[指定的日期，非必填，默认为当天] * @return {[Int]} [总天数】*/函数monthSize(HuIt){ HuIt=HuIt？新日期();let year=oDate.getFullYear()，month=oDate.getMonth()，_ HeuIt=new Date()；_ oDate.setFullYear(年);_ HitHu。SetMountain(第一个月，0);return _ HuIt。GetDate()；}getCalendarMonth

/** * [getCalendarMonth获得指定日期所在月的第一周到第四/五周的数据组合，形如：* [{ 'date': '2016/10/30 '，//日期字符串dateNum': 30，//日isCurMonth': false，//是否当前月weekIndex': 0 //是本月的第几周，下标从0开始}，{ 'date': '2016/10/31 '，' dateNum': 31 '，' isCurMonth': false，' weekIndex ' : 0 0 }，{ 'date': '2016/11/1 '，' dateNum': 1，' day': 2，' isCurMonth': true，' isToday': false，' weekIndex ' 3:指定的日期，非必填，默认为当天]* @返回{[数组]} [获得指定日期所在月的第一周到第四/五周的数据组合]*/导出函数getcalendar month(date){ date=date？日期：新日期();让y=日期。getfull year()；让m=日期。getmonth()；let _ m；让第一天=新日期(y，m，1).getDay()；//当月第一天周期让天数=monthSize(日期);//当月天数让prevMonthDays=monthSize(新日期(y，m-1))；//上月天数让initpreviday=previmonthdays-第一天；让线条=数学。天花板((第一天天数)/7);_m=新数组（第* 7行);设下个月日=0；用于(设I=0；i _ m.lengthI){让week INDEX=ParSeint(I/7)；if(I第一天){ let date=initprevious dayif(m===0 date 7){ _ m[I]={ is cur month : false，dateNum: date，weekIndex，date : ` $ { y-1 }/$ { 12 }/$ { date } ` }；} else { _ m[I]={ is cur month : false，dateNum: date，weekIndex，date : ` $ { y }/$ { m }/$ { date } ` }；} } else if(I=(第一天天数)){ let date=下个月日；if(m===11 date=7){ _ m[I]={ is cur month : false，dateNum: date，weekIndex，date : ` $ { y ^ 1 }/$ { 1 }/$ { date } ` }；} else { _ m[I]={ is cur month : false，dateNum: date，weekIndex，date : ` $ { y }/$ { m ^ 2 }/$ { date } `}；} } else { let _ date=I-第1天；让today=新日期()；让today _ y=今日。getfull year()；让today _ m=今日。getmonth()；让today _ d=今日。getdate()；让isToday=today _ y===y today _ m===m today _ d=====_ date？真：假；_m[i]={ dateNum: _date，//日期第：天i % 7，//周期weekIndex，isCurMonth: true，isToday，date : ` $ { y }/$ { m ^ 1 }/$ { _ date } ` }；} } return _ m；}getOneDateWeekIndex

/** * [getOneDateWeekIndex获得指定的某天所在该月的第几周，下标从0开始]* @ param {[日期]}日期[指定的日期，非必填，默认为当天] * @return {[Int]} [在该月的第几周]*/导出函数getonedateweyindex(date){ date=date？日期：新日期();让monthDays=getCalendarMonth(日期);让date string=getFormatDateStr(date，'/'，true，false，false)；让返回日期=月日。过滤器(项目={返回项目。日期===日期字符串；});让weekIndex=returnDate[0]。weekIndex返回weekIndex？weekIndex : 0；}总结

以上就是这篇文章的全部内容了，用上面的函数就能够实现日期格式转换，倒计时，自定义月历等常规的需要，希望对大家的学习或者工作能有一定的帮助，如果有疑问大家可以留言交流。