利用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), &#39;dddd MMMM Do, YYYY&#39;); // &#39;Friday November 20th, 2015&#39;
fecha.format(new Date(1998, 5, 3, 15, 23, 10, 350), &#39;YYYY-MM-DD hh:mm:ss.SSS A&#39;);// &#39;1998-06-03 03:23:10.350 PM&#39;
 
// 通过自定义的常量来设置日期格式
fecha.format(new Date(2015, 10, 20), &#39;mediumDate&#39;);// &#39;Nov 20, 2015&#39;
fecha.format(new Date(2015, 2, 10, 5, 30, 20), &#39;shortTime&#39;);// &#39;05:30&#39;
 
// 添加一些其他常量
fecha.format(new Date(2001, 2, 5, 6, 7, 2, 5), &#39;[on] MM-DD-YYYY [at] HH:mm&#39;); // &#39;on 03-05-2001 at 06:07&#39;

   

這樣我們就可以很容易的處理new Date() → 2016年11月19日

Parsing(日期解析)

fecha另外提供了一個parse方法。和format類似，fecha.parse接收一個Date字串和一個字串形式的日期格式，然後傳回一個Date物件。

注意： 當傳入的參數無效時，fecha會報錯

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

   

自訂命名常數

// 自定义格式化
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)

 到很本土化的需求，比如要設置“週一”“星期二”“星期一啦”這種奇怪的需求，或者周一需要設置成“月曜日”，週二要設置成“火曜日”等等

這些需求我們都可以透過在parse和format方法中提到的i18n支援來實現。

透過在fecha.i18n中修改對應的設定即可。

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'
};

   

Formatting Tokens

對fecha的再次封裝

雖然fecha提供了一些很實用的日期處理方法，但在千奇百怪的需求下，我麼還是需要對fecha進行再封裝，來滿足實際需求。而且透過fecha的封裝，抽離成公用元件，也避免了多個頁面多次進行i18n設定和masks的設定。頁面呼叫時也更加方便。

一個封裝後的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元件。

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

   

當現有日期處理無法解決實際需求時，只需要在fecha組件中自行添加方法。寫好註釋，後續同事開發相同功能時即可直接調用，提高了團隊了效率。