JS 날짜 처리에 fecha 사용

머리말

현재 프로젝트에서는 날짜 처리를 위해 fecha를 사용하고 있으며, 프로젝트의 실제 요구에 맞게 fecha를 다시 패키징했습니다.

Fecha 소개

fecha는 날짜 형식 지정 및 구문 분석을 위한 js 라이브러리로, 강력한 날짜 처리 기능을 제공하며 크기가 2k에 불과합니다. 설치 방법은 간단합니다. npm install fecha --save

포맷(날짜 형식 지정)

fecha에서는 포맷 방법을 제공합니다. fecha.format은 Date 객체(또는 타임스탬프)와 날짜 형식을 문자열로 받아 문자열(처리된 날짜)을 반환합니다.

참고: 수신 매개변수가 유효하지 않은 경우 fecha는 오류를 보고합니다.

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;

이 방법으로 새 ​​Date( ) → 2016년 11월 19일 필요

fecha.format(new Date(), 'YYYY[年]MM[月]DD[日]')

Parse 메소드를 제공합니다. format과 유사하게 fecha.parse는 Date 문자열과 문자열 형식의 날짜 형식을 받은 후 Date 객체를 반환합니다.

참고: 전달된 매개변수가 유효하지 않은 경우 fecha는 오류를 보고합니다.

Custom 명명된 상수

// 自定义格式化
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'
};

실제 사용에서는 "월요일" 설정과 같은 매우 현지화된 요구에 직면하게 됩니다. "화요일" 및 "월요일" 또는 월요일은 "월요일"로 설정해야 하며 화요일은 "불의 일요일"로 설정해야 합니다.

구문 분석 및 형식을 통해 이러한 요구 사항을 모두 충족할 수 있습니다. 이는 에서 언급한 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 ];
 }
}

fecha 재캡슐화

실제 요구 사항에서는 다양한 지저분한 요구 사항도 만나게 됩니다

fecha는 매우 실용적인 날짜 처리 방법을 제공하지만, 하지만 실제 요구 사항을 충족하려면 여전히 fecha를 다시 캡슐화해야 합니다. 또한 fecha를 캡슐화하고 이를 공용 구성 요소로 추출함으로써 여러 페이지에서 여러 i18n 구성 및 마스크 설정을 방지합니다. 또한 페이지를 호출하는 것이 더 편리합니다.

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

캡슐화된 fecha 공용 컴포넌트의 예

다른 페이지에서 날짜 처리를 사용해야 하는 경우 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')
...