利用fecha进行JS日期处理

前言

目前在项目中我们使用了fecha来进行日期处理,并对fecha进行了重新封装,满足项目中的实际需求。

fecha介绍

fecha是一个日期格式化和解析的js库,它提供了强大的日期处理功能,功能强大且只有2k大小。安装方式简单,只需要npm install fecha --save即可

Formatting(日期格式化)

fecha提供一个format方法。fecha.format接收一个Date对象(或一个时间戳)和一个字符串形式的日期格式,然后返回一个字符串(处理后的日期)。

注意: 当传入的参数无效时,fecha会报错

fecha.format(<Date Object>, <String Format>);

// 自定义格式化
// string format可以传入自定义的格式,fecha会返回相应的格式
fecha.format(new Date(2015, 10, 20), 'dddd MMMM Do, YYYY'); // 'Friday November 20th, 2015'
fecha.format(new Date(1998, 5, 3, 15, 23, 10, 350), 'YYYY-MM-DD hh:mm:ss.SSS A');// '1998-06-03 03:23:10.350 PM'

// 通过自定义的常量来设置日期格式
fecha.format(new Date(2015, 10, 20), 'mediumDate');// 'Nov 20, 2015'
fecha.format(new Date(2015, 2, 10, 5, 30, 20), 'shortTime');// '05:30'

// 添加一些其他常量
fecha.format(new Date(2001, 2, 5, 6, 7, 2, 5), '[on] MM-DD-YYYY [at] HH:mm'); // 'on 03-05-2001 at 06:07'

这样我们就可以很容易的处理new Date() → 2016年11月19日这样的需求了

fecha.format(new Date(), 'YYYY[年]MM[月]DD[日]')

Parsing(日期解析)

fecha另外提供了一个parse方法。和format类似,fecha.parse接收一个Date字符串和一个字符串形式的日期格式,然后返回一个Date对象。

注意: 当传入的参数无效时,fecha会报错

// 自定义格式化
formatsfecha.parse('February 3rd, 2014', 'MMMM Do, YYYY'); // new Date(2014, 1, 3)
fecha.parse('10-12-10 14:11:12', 'YY-MM-DD HH:mm:ss'); // new Date(2010, 11, 10, 14, 11, 12)

// 通过自定义的常量来设置日期格式

fecha.parse('5/3/98', 'shortDate'); // new Date(1998, 4, 3)
fecha.parse('November 4, 2005', 'longDate'); // new Date(2005, 10, 4)

自定义命名常量

fecha.masks = {
 'default': 'ddd MMM DD YYYY',
 shortDate: 'M/D/YY',
 mediumDate: 'MMM D, YYYY',
 longDate: 'MMMM D, YYYY',
 fullDate: 'dddd, MMMM D, YYYY',
 shortTime: 'HH:mm',
 mediumTime: 'HH:mm:ss',
 longTime: 'HH:mm:ss.SSS'
};

国际化支持(拓展)

在实际使用中,我们会碰到很本土化的需求,比如要设置“周一”“星期二”“星期一啦”这种奇怪的需求,或者周一需要设置成“月曜日”,周二要设置成“火曜日”等等

这些需求我们都可以通过在parse和format方法中提到过的i18n支持来实现。

通过在fecha.i18n中修改对应的设置即可。

fecha.i18n = {
 dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
 dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
 monthNamesShort: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
 monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
 amPm: ['上午', '下午'],
 // D is the day of the month, function returns something like... 3rd or 11th
 DoFn: function (D) {
  return D + [ 'th', 'st', 'nd', 'rd' ][ D % 10 > 3 ? 0 : (D - D % 10 !== 10) * D % 10 ];
 }
}

Formatting Tokens

对fecha的再次封装

在实际需求中,我们还会遇到各种乱七八糟的需求

2016-11-20 → 明天 11-20
2016-11-23 → 下周三 11-23
10:00 加上100分钟的时间
...

虽然fecha提供了一些很实用的日期处理方法,但在千奇百怪的需求下,我么还是需要对fecha进行再封装,来满足实际需要。而且通过对fecha的封装,抽离成公用组件,也避免了多个页面多次进行i18n配置和masks的设置。页面调用时也更加方便。

一个封装后的fecha公共组件示例

import fecha from 'fecha'

fecha.i18n = {
 dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
 dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
 monthNamesShort: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
 monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
 amPm: ['上午', '下午'],
 // D is the day of the month, function returns something like... 3rd or 11th
 DoFn: function (D) {
  return D + [ 'th', 'st', 'nd', 'rd' ][ D % 10 > 3 ? 0 : (D - D % 10 !== 10) * D % 10 ];
 }
}

fecha.masks = {
 'default': 'ddd MMM DD YYYY',
 shortDate: 'M/D/YY',
 mediumDate: 'MMM D, YYYY',
 longDate: 'MMMM D, YYYY',
 fullDate: 'dddd, MMMM D, YYYY',
 shortTime: 'HH:mm',
 mediumTime: 'HH:mm:ss',
 longTime: 'HH:mm:ss.SSS'
};
// str 必须是 YYYYMMDD格式
// YYYYMMDD → xx(今天/后天/下周一...)MM月DD日
fecha.getDateString = (str, format) => {
 let now = Date.now();
 let today = fecha.format.bind(null, new Date());
 let tomorrow = fecha.format.bind(null, new Date(now + 86400 * 1000));
 let dayafter = fecha.format.bind(null, new Date(now + 86400 * 2 * 1000));

 let week_start = parseInt(today('d'));

 let result = {};
 // 从本周一到下周日共14个
 let weeks = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
 result[today(YYYYMMDD)] = `今天 ${today('MM')}月${today('DD')}日`;
 result[tomorrow(YYYYMMDD)] = `明天 ${tomorrow('MM')}月${tomorrow('DD')}日`;
 result[dayafter(YYYYMMDD)] = `后天 ${dayafter('MM')}月${dayafter('DD')}日`;

 weeks.slice(week_start + 3).forEach((after) => {
  let step = after - week_start;
  let _dayafter = fecha.format.bind(null, new Date(now + 86400 * step * 1000));
  result[_dayafter(YYYYMMDD)] = `${(after < 8 ? '本' : '下')}${_dayafter('ddd')} ${_dayafter('MM')}-${_dayafter('DD')}`;
 })
 // 如果出现下下周一的情况则输出调用时传入的格式规范
 return result || format(fecha.parse(str, YYYYMMDD), format)
}

export default fecha

当其他页面需要使用日期处理时,只需要在页面调用fecha组件即可。

import DateParser from 'fecha'

...
 let date = DateParser.getDateString('20161123', 'YYYY-MM-DD')
...

当现有日期处理不能解决实际需要时,只需要在fecha组件中自行添加方法。写好注释,后续同事开发相同功能时即可直接调用,提高了团队了效率。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

(0)

相关推荐

  • js日期对象兼容性的处理方法

    复制代码 代码如下: function NewDate(str) { str = str.split('-'); var date = new Date(); date.setUTCFullYear(str[0], str[1] - 1, str[2]); date.setUTCHours(0, 0, 0, 0); return date; } 所以,为保证在各个浏览器中兼容,其实就是指为了兼容IE,我们在使用Date()对象时最好统一使用 new Date(year, month, day,

  • JS处理json日期格式化问题

    起因 对于从C#返回的日期字段,当进行JSON序列化后,在前台JS里显示的并不是真正的日期,这让我们感觉很不爽,我们不可能为了这东西,把所有日期字段都变成string吧,所以,找了一个JS的扩展方法,来实现这个功能 实现 function ChangeDateFormat(jsondate) { jsondate = jsondate.replace("/Date(", "").replace(")/", ""); if (j

  • 日期处理的js库(迷你版)--自建js库总结

    接口+继承+代码优化思想 先分享下我觉得一个很不错的js编程小技巧,达到很大的代码共用性! 因为很多js库会在原生的对象上进行直接原型扩展,但这是很不好的习惯,不仅加重了每个新实例对象的内存消耗,而且容易造成污染性误解(以为有这东西)!而这也是建js库一个准则:尽量少的原型扩展,特别是越根部的对象! js建库准则 js建库准则(Dean Edwards在开发base2时候的一些体会)翻译版:http://biaoge.me/2009/12/239 js建库学习好地方:http://ejohn.o

  • Javascript 日期处理之时区问题

    复制代码 代码如下: //dateObj是一个日期对象,days表示给这个日期加多少天,比如说4,5(天) function dateAdd(dateObj,days){ var tempDate = dateObj.valueOf(); tempDate = tempDate + days * 24 * 60 * 60 * 1000; tempDate = new Date(tempDate); return tempDate; } //然后使用,创建一个日期对象 var dateValue

  • javascript中处理时间戳为日期格式的方法

    公共处理时间戳函数 复制代码 代码如下: /** * 处理时间戳转换成日期格式 * @param {Object} obj 时间戳{10位的时间戳需要乘以1000:13位的时间戳不需要} * @return {TypeName} 返回日期格式 2013-09-16 */ function fullnum(obj){ if(Number(obj) < 10){ return '0' + obj; }else{ return obj; } } 1.在PHP中存入的时间戳是10位的,而在javascr

  • javascript显示上周、上个月日期的处理方法

    本文实例介绍了javascript一周前.一个月前的实现代码,对于javascript日期处理进行了简单分析,分享给大家供大家参考,具体内容如下 <html> <head> <title></title> <script src="../Script/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script> <script s

  • 5个最佳的Javascript日期处理类库分享

    在大家日常网站开发和web应用开发中,我们往往需要有效的调用Javascript处理日期和时间格式相关的函数,在Javascript中已经包含了部分最基本的内建处理方法.当然如果大家有时间的话,完全可以自己开发和编写需要的方法,但是有效的使用别人已经开发好的类库肯定是一个更好的处理方式,没有必要什么都原创吧,君子善假于物也.今天这里我们收集了5个最佳的日期处理函数类库,希望对于大家有帮助,如果你喜欢我们的文章,请大家给我们留言,谢谢! 1. XDate 这个类库是javascript本地日期对象

  • Moment.js 不容错过的超棒Javascript日期处理类库

    使用这个类库,可以帮助你有效的处理相关日期.希望大家喜欢! 主要特性: 3.2kb超轻量级 独立类库,意味这你不需要倒入一堆js 日期处理支持UNIX 时间戳,String,指定格式的Date 日期处理:加,减日期 日期显示:包括相对时间显示的日期显示选项 其它内建的功能,例如,保存,timezone offset和i18n支持 可以作为node.js的一个模块 完整的文档介绍 如何使用? 复制代码 代码如下: var now = moment(); console.log(now.format

  • 自己整理的一个javascript日期处理函数

    复制代码 代码如下: /* * 函数名称: DateUtil * 作 者: yithcn * 功能说明: 日期函数 * 使用说明: * 创建日期: 2010.10.14 */ var DateUtil = {}; DateUtil.base = 60 * 60 * 24 * 1000; DateUtil.Add = function(num, sDate) { num = num || 0; sDate = sDate || new Date(); var base = this.base *

  • 浅谈JS日期(Date)处理函数

    获取日期 1.Date() --返回当日的日期和时间. 2.getDate() --从 Date 对象返回一个月中的某一天 (1 ~ 31). 3.getDay() --从 Date 对象返回一周中的某一天 (0 ~ 6). 4.getMonth() --从 Date 对象返回月份 (0 ~ 11). 5.getFullYear() --从 Date 对象以四位数字返回年份. 6.getYear() --请使用 getFullYear() 方法代替. 7.getHours() --返回 Date

随机推荐