详解js中常规日期格式处理、月历渲染和倒计时函数

前端之家收集整理的这篇文章主要介绍了详解js中常规日期格式处理、月历渲染和倒计时函数前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

相信大家都知道日期格式处理在前端的日常任务中非常常见,但是为此引入monent.js这样的类库又会显得有点臃肿,毕竟我们一个特定的项目中,并不需要monent.js那么全的涵盖范围。另外,如果现在公司让你自己手写一个日历组件(月历、周历),日历组件中需要耦合我们的其他业务需求,如果有一个任务列表,当11月22号的待进行任务,我需要在日历上有一个绿色圆点,表示当天有待办事项。

下面介绍一些常规的函数,希望对大家有用。

月历效果

函数目录

@H_502_20@
  • 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}${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,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

    调用时的时间] * @param {[String]} type [前一天还是后一天,非必填参数,默认后一天] * @param {[Int]} daysNum [天数,非必填参数,默认一天] * @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

    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

    函数名,非必填] * @param {[Function]} endFun [倒计时结束需要执行的函数名,非必填] * @return {[null]} [无返回值] */ 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

    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

    { return item.date === dateString; }); let weekIndex = returnDate[0].weekIndex; return weekIndex ? weekIndex : 0; }

    总结

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

    猜你在找的JavaScript相关文章