在日常項目中匹摇，經常會碰到日期處理的需求，這種需求千奇百怪甲葬，而且往往經常變化廊勃。雖然js提供了原生的Date方法供我們選擇，但一些復雜的日期時間處理起來往往力不從心演顾。
目前在項目中我們使用了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支持來實現(xiàn)孽尽。
通過在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')}`;
})
// 如果出現(xiàn)下下周一的情況則輸出調用時傳入的格式規(guī)范
return result || format(fecha.parse(str, YYYYMMDD), format)
}
export default fecha
當其他頁面需要使用日期處理時，只需要在頁面調用fecha組件即可廉白。
import DateParser from 'fecha'
...
let date = DateParser.getDateString('20161123', 'YYYY-MM-DD')
...
當現(xiàn)有日期處理不能解決實際需要時个初，只需要在fecha組件中自行添加方法。寫好注釋猴蹂，后續(xù)同事開發(fā)相同功能時即可直接調用院溺，提高了團隊了效率。
