前言
目前在项目中我们使用了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组件中自行添加方法。写好注释，后续同事开发相同功能时即可直接调用，提高了团队了效率。