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

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

  • 月历效果图

月历.png

函数目录
  • 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,‘/‘);
      }
          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    [日期，非必填参数，表示调用时的时间]
 * @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
/**
 * [formatDateWithTimeZone 格式化日期带时区，ISO 8601]
 * @param  {[Date]} date [日期，非必填参数，表示调用时的时间]
 * @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 倒计时]
 * @param  {[Int]} restSeconds   [剩余秒数，必填]
 * @param  {[Int]} timeInterval   [时间间隔，非必填，默认1000ms]
 * @param  {[Function]} func   [每倒计时一次，就需要执行一次的回调函数名，非必填]
 * @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
/**
 * [monthSize 获得指定日期所在月的天数]
 * @param  {[Date]} oDate [指定的日期，非必填，默认为当天]
 * @return {[Int]}       [总天数]
 */
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 获得指定日期所在月的第一周到第四/五周的数据组合，形如：
 * [{
    "date": "2016/10/30", //日期字符串
    "dateNum": 30,  //日
    "isCurMonth": false, //是否当前月
    "weekIndex": 0 //是本月的第几周，下标从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 [指定的日期，非必填，默认为当天]
 * @return {[Array]}       [获得指定日期所在月的第一周到第四/五周的数据组合]
 */
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(); //当月第一天 周期
    let days = monthSize(date);//当月天数
    let prevMonthDays = monthSize(new Date(y, m - 1));//上月天数
    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 获得指定的某天所在该月的第几周，下标从0开始]
 * @param  {[Date]} date [指定的日期，非必填，默认为当天]
 * @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;
}
用上面的函数就能够实现日期格式转换，倒计时，自定义月历等常规的需要，希望对您有用~

文／webCoder（简书作者）
原文链接：http://www.jianshu.com/p/5f07f26b0716
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

时间： 2024-12-19 15:41:50

js常规日期格式处理、月历渲染、倒计时函数的相关文章

字符串转换成js的日期格式

js字符串转日期格式 ,JavaScript字符串转日期格式 大家都知道JS是根据结果来确定数据类型的. 当然我们也是可以转化的,下面我就介绍两种关于JS字符串类型转换成日期类型的方法, 我个人比较喜欢的是第一种方法. 大家有什么别的好方法也可以分享一下. 1.eval方法转换方法,---推荐使用这种方法 我写成了一个方法大家要吧直接调用 ? <script type="text/javascript">         //字符串转日期格式,strDate要转为日期格式的

Js 自定义日期格式的正则表达式验证

截至2017-07-14,下面的脚本还存在不会验证闰年闰月.大小月的情况,大小月.闰年.闰月只能用其他方式验证! var currentFormat="YYYY-MM-dd HH:ss.SSS";//输入常见日期格式 currentFormat = currentFormat //优先替换特殊字符,因为后面替换的正则表达式中包含特殊字符 .replace(/\s/ig, "\\s") .replace(/\//ig, "\\/") .replac

js将日期格式转换为YYYY-MM-DD HH:MM:SS

<script language="javascript" type="text/javascript"> //页面加载 jQuery(document).ready(function($){ ASK_TIME=(new Date()).Format("yyyy-MM-dd hh:mm:ss"); document.all('JK_MAIN/ASK_TIME').value=ASK_TIME; //格式化日期 Date.prototy

js指定日期格式

1 var nowDate = new Date(); 2 alert("当前时间为:"+nowDate);//当前时间为:Fri Feb 23 2018 14:16:31 GMT+0800 (中国标准时间) 3 alert("当前毫秒为:"+nowDate.getTime());//当前毫秒为:1519366591738 4 5 var myDate = new Date(nowDate.getTime()); 6 7 alert(myDate.toLocaleS

JS时间日期格式转换

第一种: function ConvertJSONDate(jsondate) {        if (jsondate != "" && jsondate != null) {            var date = new Date(parseInt(jsondate.replace("/Date(", "").replace(")/", ""), 10));           

javascript时间戳与日期格式的相互转换

这里总结下JavaScript中时间戳和日期格式的相互转换方法(自定义函数). 将时间戳转换为日期格式 function timestampToTime(timestamp) { var date = new Date(timestamp * 1000); // 时间戳为10位需*1000,时间戳为13位的话不需乘1000 var Y = date.getFullYear() + '-'; var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMo

js 时间戳转为日期格式

js 时间戳转为日期格式 什么是Unix时间戳(Unix timestamp): Unix时间戳(Unix timestamp),或称Unix时间(Unix time).POSIX时间(POSIX time),是一种时间表示方式,定义为从格林威治时间1970年01月01日00时00分00秒起至现在的总秒数.Unix时间戳不仅被使用在Unix系统.类Unix系统中,也在许多其他操作系统中被广泛采用. 目前相当一部分操作系统使用32位二进制数字表示时间.此类系统的Unix时间戳最多可以使用到格林威治

AngularJS过滤器filter-时间日期格式-渲染日期格式-$filter

今天遇到了这些问题索性就 写篇文章吧 话不多说直接上栗子 不管任何是HTML格式还是JS格式必须要在  controller 里面写 // new Date() 获取当前时间 yyyy-MM-ddd //是返回的格式 下面会一 一列出 这种返回格式$scope.wwwwwww = $filter(new Date(),'yyyy-MM-dd') //或者这样写//这样是 指定date类型 可以省略不写 下面的是多此一举 但是我感觉有人会钻牛角尖所以嘛 嘿嘿 $scope.wwwwwww = $f

js日期格式简单转换代码

js日期格式简单转换代码: 未经修饰的东西总是狂野粗糙的,比如人没有经过良好的教育,这人可能会有各种问题,同样js中的时间格式也是如此,所以要对时间进行一定的格式化操作,下面是一段非常简单的代码实例和大家分享一下. 代码如下: function dateStr(x,y) { var z={ y:x.getFullYear(), M:x.getMonth()+1, d:x.getDate(), h:x.getHours(), m:x.getMinutes(), s:x.getSeconds() }