利用fecha進(jìn)行JS日期處理
前言
目前在項(xiàng)目中我們使用了fecha來(lái)進(jìn)行日期處理,并對(duì)fecha進(jìn)行了重新封裝,滿足項(xiàng)目中的實(shí)際需求。
fecha介紹
fecha是一個(gè)日期格式化和解析的js庫(kù),它提供了強(qiáng)大的日期處理功能,功能強(qiáng)大且只有2k大小。安裝方式簡(jiǎn)單,只需要npm install fecha --save
即可
Formatting(日期格式化)
fecha提供一個(gè)format方法。fecha.format
接收一個(gè)Date對(duì)象(或一個(gè)時(shí)間戳)和一個(gè)字符串形式的日期格式,然后返回一個(gè)字符串(處理后的日期)。
注意: 當(dāng)傳入的參數(shù)無(wú)效時(shí),fecha會(huì)報(bào)錯(cuò)
fecha.format(<Date Object>, <String Format>); // 自定義格式化 // string format可以傳入自定義的格式,fecha會(huì)返回相應(yīng)的格式 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' // 通過(guò)自定義的常量來(lái)設(shè)置日期格式 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另外提供了一個(gè)parse方法。和format類似,fecha.parse接收一個(gè)Date字符串和一個(gè)字符串形式的日期格式,然后返回一個(gè)Date對(duì)象。
注意: 當(dāng)傳入的參數(shù)無(wú)效時(shí),fecha會(huì)報(bào)錯(cuò)
// 自定義格式化 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) // 通過(guò)自定義的常量來(lái)設(shè)置日期格式 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' };
國(guó)際化支持(拓展)
在實(shí)際使用中,我們會(huì)碰到很本土化的需求,比如要設(shè)置“周一”“星期二”“星期一啦”這種奇怪的需求,或者周一需要設(shè)置成“月曜日”,周二要設(shè)置成“火曜日”等等
這些需求我們都可以通過(guò)在parse和format方法中提到過(guò)的i18n支持來(lái)實(shí)現(xiàn)。
通過(guò)在fecha.i18n中修改對(duì)應(yīng)的設(shè)置即可。
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
對(duì)fecha的再次封裝
在實(shí)際需求中,我們還會(huì)遇到各種亂七八糟的需求
2016-11-20 → 明天 11-20 2016-11-23 → 下周三 11-23 10:00 加上100分鐘的時(shí)間 ...
雖然fecha提供了一些很實(shí)用的日期處理方法,但在千奇百怪的需求下,我么還是需要對(duì)fecha進(jìn)行再封裝,來(lái)滿足實(shí)際需要。而且通過(guò)對(duì)fecha的封裝,抽離成公用組件,也避免了多個(gè)頁(yè)面多次進(jìn)行i18n配置和masks的設(shè)置。頁(yè)面調(diào)用時(shí)也更加方便。
一個(gè)封裝后的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個(gè) 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)下下周一的情況則輸出調(diào)用時(shí)傳入的格式規(guī)范 return result || format(fecha.parse(str, YYYYMMDD), format) } export default fecha
當(dāng)其他頁(yè)面需要使用日期處理時(shí),只需要在頁(yè)面調(diào)用fecha組件即可。
import DateParser from 'fecha' ... let date = DateParser.getDateString('20161123', 'YYYY-MM-DD') ...
當(dāng)現(xiàn)有日期處理不能解決實(shí)際需要時(shí),只需要在fecha組件中自行添加方法。寫好注釋,后續(xù)同事開(kāi)發(fā)相同功能時(shí)即可直接調(diào)用,提高了團(tuán)隊(duì)了效率。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流。
相關(guān)文章
使用html+js+css 實(shí)現(xiàn)頁(yè)面輪播圖效果(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇使用html+js+css 實(shí)現(xiàn)頁(yè)面輪播圖效果(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09微信小程序全局變量GLOBALDATA的定義和調(diào)用過(guò)程解析
這篇文章主要介紹了微信小程序全局變量GLOBALDATA的定義和調(diào)用過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09關(guān)于Iframe父頁(yè)面與子頁(yè)面之間的相互調(diào)用
下面小編就為大家?guī)?lái)一篇關(guān)于Iframe父頁(yè)面與子頁(yè)面之間的相互調(diào)用。小編覺(jué)得挺不錯(cuò)的,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧,祝大家游戲愉快哦2016-11-11利用Javascript實(shí)現(xiàn)簡(jiǎn)單的轉(zhuǎn)盤抽獎(jiǎng)
這篇文章主要介紹了利用Javascript實(shí)現(xiàn)的簡(jiǎn)單的轉(zhuǎn)盤抽獎(jiǎng),文中分享了兩種抽獎(jiǎng)效果,一種是默認(rèn)轉(zhuǎn)動(dòng),一種是需要點(diǎn)擊開(kāi)始轉(zhuǎn)動(dòng)的,并給出了晚上的示例代碼,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-02-02通過(guò)button將form表單的數(shù)據(jù)提交到action層的實(shí)例
下面小編就為大家?guī)?lái)一篇通過(guò)button將form表單的數(shù)據(jù)提交到action層的實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09