Use fecha for JS Date Processing

Introduction to JS Date Processing Using fecha

Currently, fecha is used in the project for date processing, and fecha is re-encapsulated to meet the actual needs of the project.

Fecha Introduction

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

Formatting (date Formatting)

Fecha provides a format method. Fecha. format receives a Date object (or a timestamp) and a Date format in string form, and then returns a string (processed Date ).

Note: When the input parameter is invalid, fecha reports an error.

Fecha. format (
 
  
,
  
   
); // Custom formatting // string format can be passed in a custom format. fecha returns the corresponding format fecha. format (new Date (2015, 10, 20), 'dddd MMMM Do, YYYY '); // 'Friday November 20th, 100' fecha. format (new Date (1998, 5, 3, 15, 23, 10,350), 'yyyy-MM-DD hh: mm: ss. SSS A'); // '2017-06-03 03:23:10. 350 PM '// use a custom constant to set the date format fecha. format (new Date (2015, 10, 20), 'mediumdate'); // 'nov 20,201 5' fecha. format (new Date (2015, 2, 10, 5, 30, 20), 'processing Time'); // '05: 30' // Add some other constants 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'
  
 

In this way, we can easily deal with the new Date () → November 19, 2016 requirements.

Fecha. format (new Date (), 'yyyy [year] MM [month] DD [Day] ')

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 input parameter is invalid, fecha reports an error.

// Customize formatsfecha. parse ('february 3rd, 100', '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) // use custom constants to set the date format fecha. parse ('2014/1/98 ', '1_date'); // new Date (5/3, 4, 3) fecha. parse ('November 4, 100', 'longdate'); // new Date (2005, 10, 4)

Custom name Constants

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

International support (expansion)

In actual use, we will encounter very localized requirements, such as the strange requirements of "Monday", "Tuesday", and "Monday, or you need to set Monday to "Monthly sun", and Tuesday to "Fire Sun ".

These requirements can all be achieved through the i18n support mentioned in the parse and format methods.

Modify the settings in fecha. i18n.

Fecha. i18n = {dayNamesShort: ['sunday', 'monday', 'tuesday', 'wedday', 'Friday', 'satur'], dayNames: ['sunday', 'monday', 'tuesday', 'wedday', 'thurs', 'Friday'], monthNamesShort: ['01 ', '02 ', '03', '04', '05 ', '06', '07 ', '08', '09 ', '10', '11 ', '12'], monthNames: ['August 11', 'August 11', 'August 11', 'August 11', 'August 11', 'August 30', 'August 12 ', 'August 11', 'August 11', 'August 11', 'August 11'], amPm: ['morning ', 'Afternoon'], // D is the day of the month, function returns something like... 3r D or 11th DoFn: function (D) {return D + ['th', 'st', 'nd', 'RD '] [D % 10> 3? 0: (D-D % 10! = 10) * D % 10];}

Formatting Tokens

In actual needs, we will also encounter various messy demands.

→ Tomorrow 11-202016-11-23 → next Wednesday 11-2310: 00 plus 100 minutes...

Although fecha provides some useful date processing methods, I still need to encapsulate fecha to meet the actual needs. In addition, through the encapsulation of fecha, It is extracted into a public component, which also avoids multiple page settings for i18n and masks. Page calling is also more convenient.

Example of a encapsulated fecha public component

Import fecha from 'fecha 'fecha. i18n = {dayNamesShort: ['sunday', 'monday', 'tuesday', 'wedday', 'Friday', 'satur'], dayNames: ['sunday', 'monday', 'tuesday', 'wedday', 'thurs', 'Friday'], monthNamesShort: ['01 ', '02 ', '03', '04', '05 ', '06', '07 ', '08', '09 ', '10', '11 ', '12'], monthNames: ['August 11', 'August 11', 'August 11', 'August 11', 'August 11', 'August 30', 'August 12 ', 'August 11', 'August 11', 'August 11', 'August 11'], amPm: ['morning ', 'Afternoon'], // D is the day of the month, function re Turns 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', interval Date:'m/D/yy', mediumDate: 'mmm D, yyyy', longDate: 'mmmm D, YYYY ', fullDate: 'dddd, mmmm d, YYYY', interval time: 'hh: mm', mediumTime: 'hh: mm: ss', longTime: 'hh: mm: ss. sss'}; // str must be in YYYYMMDD format // YYYYMMDD → xx (today/The Day After Tomorrow/next Monday ...) mm dd fecha. getDateString = (str, format) => {let now = Date. now (); let today = fecha. format. bind (null, n Ew 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 from Monday to next Sunday, 12, 13]; result [today (YYYYMMDD)] = 'today $ {today ('mm')} month $ {today ('dd')} Day '; result [tomorrow (YYYYMMDD)] = 'Tomorrow $ {tomorrow ('mm ')} Month $ {tomorrow ('dd')} '; result [dayafter (YYYYMMDD)] = 'day after tomorrow $ {dayafter ('mm ')} month $ {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? 'Stop': 'sub') }$ {_ dayafter ('ddd ') }$ {_ dayafter ('mm')}-$ {_ dayafter ('dd ')} ';}) // The format standard return result passed in when the output is called next Monday | format (fecha. parse (str, YYYYMMDD), format)} export default fecha

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

import DateParser from 'fecha' ... let date = DateParser.getDateString('20161123', 'YYYY-MM-DD')...

When the existing date processing cannot solve the actual needs, you only need to add the method in the fecha component. After writing the notes, you can directly call them when colleagues develop the same functions, improving the team's efficiency.