利用fecha进行JS日期处理


Posted in Javascript onNovember 21, 2016

前言

目前在项目中我们使用了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进行JS日期处理

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

总结

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

Javascript 相关文章推荐
Javascript - HTML的request类
Jul 15 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
用console.table()调试javascript
Sep 04 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
jQuery对JSON数据进行排序输出的方法
Jun 24 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
过滤器vue.filters的使用方法实现
Sep 18 Javascript
jquery实现上传文件进度条
Mar 26 jQuery
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 #Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 #Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 #Javascript
js学习之----深入理解闭包
Nov 21 #Javascript
浅谈js原生拖放
Nov 21 #Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 #Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 #Javascript
You might like
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
双击滚屏-常用推荐
2006/11/29 Javascript
JavaScript 应用类库代码
2008/06/02 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
js字符串转成JSON
2013/11/07 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
简单实现Python爬取网络图片
2018/04/01 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
python占位符输入方式实例
2019/05/27 Python
django和flask哪个值得研究学习
2020/07/31 Python
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
女大学生自我鉴定
2013/12/09 职场文书
优秀团队获奖感言
2014/02/19 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
小摄影师教学反思
2014/04/27 职场文书
社团活动总结怎么写
2014/06/30 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
党委班子剖析材料
2014/08/21 职场文书
科学育儿宣传标语
2014/10/08 职场文书
教师工作总结范文2014
2014/11/10 职场文书
大学生党课感想
2015/08/11 职场文书
关于职业道德的心得体会
2016/01/18 职场文书