Using fecha for JS date processing-JS Tutorial-php.cn

Using fecha for JS date processing

高洛峰

Release： 2016-12-06 11:12:45

Original

1594 people have browsed it

Foreword

Currently, we use fecha for date processing in the project, and have repackaged fecha to meet the actual needs of the project.

Introduction to fecha

fecha is a js library for date formatting and parsing. It provides powerful date processing functions, is powerful and is only 2k in size. The installation method is simple, just npm install fecha --save

Formatting (date formatting)

fecha provides a format method. fecha.format takes a Date object (or a timestamp) and a date format as a string, and returns a string (the processed date).

Note: When the incoming parameters are invalid, fecha will report an error

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;

Copy after login

This way we can easily handle the demand like new Date() → November 19, 2016

fecha.format(new Date(), &#39;YYYY[年]MM[月]DD[日]&#39;)

Copy after login

Parsing(date parsing)

fecha also provides a parse method. Similar to format, fecha.parse receives a Date string and a date format in string form, and then returns a Date object.

Note: When the parameters passed in are invalid, fecha will report an error

// 自定义格式化
formatsfecha.parse(&#39;February 3rd, 2014&#39;, &#39;MMMM Do, YYYY&#39;); // new Date(2014, 1, 3)
fecha.parse(&#39;10-12-10 14:11:12&#39;, &#39;YY-MM-DD HH:mm:ss&#39;); // new Date(2010, 11, 10, 14, 11, 12)
 
// 通过自定义的常量来设置日期格式
 
fecha.parse(&#39;5/3/98&#39;, &#39;shortDate&#39;); // new Date(1998, 4, 3)
fecha.parse(&#39;November 4, 2005&#39;, &#39;longDate&#39;); // new Date(2005, 10, 4)

Copy after login

Custom named constants

fecha.masks = {
 &#39;default&#39;: &#39;ddd MMM DD YYYY&#39;,
 shortDate: &#39;M/D/YY&#39;,
 mediumDate: &#39;MMM D, YYYY&#39;,
 longDate: &#39;MMMM D, YYYY&#39;,
 fullDate: &#39;dddd, MMMM D, YYYY&#39;,
 shortTime: &#39;HH:mm&#39;,
 mediumTime: &#39;HH:mm:ss&#39;,
 longTime: &#39;HH:mm:ss.SSS&#39;
};

Copy after login

Internationalization support (expansion)

In actual use, we will encounter There are very local needs, such as strange needs such as setting "Monday", "Tuesday" and "Monday", or Monday needs to be set to "Sunday", Tuesday needs to be set to "Sunday", etc.

We have these needs All can be achieved through the i18n support mentioned in the parse and format methods.

Just modify the corresponding settings in fecha.i18n.

fecha.i18n = {
 dayNamesShort: [&#39;周日&#39;, &#39;周一&#39;, &#39;周二&#39;, &#39;周三&#39;, &#39;周四&#39;, &#39;周五&#39;, &#39;周六&#39;],
 dayNames: [&#39;星期日&#39;, &#39;星期一&#39;, &#39;星期二&#39;, &#39;星期三&#39;, &#39;星期四&#39;, &#39;星期五&#39;, &#39;星期六&#39;],
 monthNamesShort: [&#39;01&#39;, &#39;02&#39;, &#39;03&#39;, &#39;04&#39;, &#39;05&#39;, &#39;06&#39;, &#39;07&#39;, &#39;08&#39;, &#39;09&#39;, &#39;10&#39;, &#39;11&#39;, &#39;12&#39;],
 monthNames: [&#39;一月&#39;, &#39;二月&#39;, &#39;三月&#39;, &#39;四月&#39;, &#39;五月&#39;, &#39;六月&#39;, &#39;七月&#39;, &#39;八月&#39;, &#39;九月&#39;, &#39;十月&#39;, &#39;十一月&#39;, &#39;十二月&#39;],
 amPm: [&#39;上午&#39;, &#39;下午&#39;],
 // D is the day of the month, function returns something like... 3rd or 11th
 DoFn: function (D) {
  return D + [ &#39;th&#39;, &#39;st&#39;, &#39;nd&#39;, &#39;rd&#39; ][ D % 10 > 3 ? 0 : (D - D % 10 !== 10) * D % 10 ];
 }
}

Copy after login

Formatting Tokens

Using fecha for JS date processing

Re-encapsulation of fecha

In actual needs, we will also encounter various messy requirements

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

Copy after login

Although fecha provides some great A practical date processing method, but under all kinds of strange needs, we still need to re-encapsulate fecha to meet actual needs. Moreover, by encapsulating fecha and extracting it into public components, it also avoids multiple i18n configurations and masks settings on multiple pages. It is also more convenient to call the page.

An example of an encapsulated fecha public component

import fecha from 'fecha'
 
fecha.i18n = {
 dayNamesShort: [&#39;周日&#39;, &#39;周一&#39;, &#39;周二&#39;, &#39;周三&#39;, &#39;周四&#39;, &#39;周五&#39;, &#39;周六&#39;],
 dayNames: [&#39;星期日&#39;, &#39;星期一&#39;, &#39;星期二&#39;, &#39;星期三&#39;, &#39;星期四&#39;, &#39;星期五&#39;, &#39;星期六&#39;],
 monthNamesShort: [&#39;01&#39;, &#39;02&#39;, &#39;03&#39;, &#39;04&#39;, &#39;05&#39;, &#39;06&#39;, &#39;07&#39;, &#39;08&#39;, &#39;09&#39;, &#39;10&#39;, &#39;11&#39;, &#39;12&#39;],
 monthNames: [&#39;一月&#39;, &#39;二月&#39;, &#39;三月&#39;, &#39;四月&#39;, &#39;五月&#39;, &#39;六月&#39;, &#39;七月&#39;, &#39;八月&#39;, &#39;九月&#39;, &#39;十月&#39;, &#39;十一月&#39;, &#39;十二月&#39;],
 amPm: [&#39;上午&#39;, &#39;下午&#39;],
 // D is the day of the month, function returns something like... 3rd or 11th
 DoFn: function (D) {
  return D + [ &#39;th&#39;, &#39;st&#39;, &#39;nd&#39;, &#39;rd&#39; ][ D % 10 > 3 ? 0 : (D - D % 10 !== 10) * D % 10 ];
 }
}
 
fecha.masks = {
 &#39;default&#39;: &#39;ddd MMM DD YYYY&#39;,
 shortDate: &#39;M/D/YY&#39;,
 mediumDate: &#39;MMM D, YYYY&#39;,
 longDate: &#39;MMMM D, YYYY&#39;,
 fullDate: &#39;dddd, MMMM D, YYYY&#39;,
 shortTime: &#39;HH:mm&#39;,
 mediumTime: &#39;HH:mm:ss&#39;,
 longTime: &#39;HH:mm:ss.SSS&#39;
};
// 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

Copy after login

When other pages need to use date processing, you only need to call the fecha component on the page.

import DateParser from &#39;fecha&#39;
 
...
 let date = DateParser.getDateString(&#39;20161123&#39;, &#39;YYYY-MM-DD&#39;)
...

Copy after login

When the existing date processing cannot solve the actual needs, you only need to add the method yourself in the fecha component. After writing the comments, colleagues can call them directly when they develop the same function, which improves the efficiency of the team.