利用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 mouseover、mouseout停止事件冒泡的解决方案
Apr 07 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
jQuery css() 方法动态修改CSS属性
Sep 25 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
three.js如何实现3D动态文字效果
Mar 03 Javascript
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
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
学习YUI.Ext第五日--做拖放Darg&amp;Drop
2007/03/10 Javascript
小型js框架veryide.librar源代码
2009/03/05 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
python显示天气预报
2014/03/02 Python
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
实例解析Python中的__new__特殊方法
2016/06/02 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
苹果香港官方商城:Apple香港
2016/09/14 全球购物
大学生求职中的自我评价
2013/10/01 职场文书
中层竞聘演讲稿
2014/01/09 职场文书
活动邀请函范文
2014/01/19 职场文书
施工材料员岗位职责
2014/02/12 职场文书
保证书格式范文
2014/04/28 职场文书
入党介绍人评语
2014/05/06 职场文书
劳资员岗位职责
2015/02/13 职场文书