---
type: snippet
tags: ['dates', 'chrono', 'datepicker', 'inclusive-dates']
title: 자연어 날짜 처리와 접근성 높은 데이트피커 - chrono와 inclusive-dates
description: chrono와 inclusive-dates 라이브러리를 소개. chrono는 강력한 자연어 날짜 파서이고, inclusive-dates는 이를 활용한 접근성 높은 데이트피커입니다.
status: release
ctime: 2024-06-02
mtime: 2024-08-09
---

[chrono](https://github.com/wanasit/chrono)는 다양한 형식의 날짜/시간을 처리하고 주어진 텍스트에서 정보를 추출할 수 있도록 설계된 자연어 날짜 파서.

- "Today", "Tomorrow", "Yesterday", "Last Friday" 등의 상대적 날짜 처리
- "17 August 2013 - 19 August 2013"와 같은 날짜 범위 처리
- "This Friday from 13:00 - 16.00"와 같은 시간 포함 날짜 처리
- "5 days ago", "2 weeks from now"와 같은 상대적 시간 표현 처리
- "Sat Aug 17 2013 18:40:39 GMT+0900 (JST)"와 같은 표준 날짜 형식 처리
- "2014-11-30T08:15:30-05:30"와 같은 ISO 8601 형식 처리

`parse()`[^304-1][^304-2][^304-3]

```ts
parse(text: string, referenceDate?: ParsingReference | Date, option?: ParsingOption): ParsedResult[] {
  // 1. 파싱 컨텍스트 생성
  // 2. 모든 파서를 실행하고 결과 수집
  // 3. 결과를 인덱스 기준으로 정렬
  // 4. 모든 리파이너를 적용하여 결과 개선
  // 5. 최종 결과 반환
}
```

[inclusive-dates](https://github.com/fymmot/inclusive-dates)는 자연어 입력을 지원하는 사용자 친화적이고 완전히 접근 가능한 데이트피커. 내부적으로 chrono를 사용하여 자연어 날짜 입력을 처리. 이는 두 라이브러리의 장점을 결합한 좋은 예시.

```tsx
const parsedDate = await chronoParseDate(text, {
  locale: this.locale.slice(0, 2),
  minDate: this.minDate,
  maxDate: this.minDate,
  referenceDate: removeTimezoneOffset(new Date(this.referenceDate)),
  ...chronoOptions,
})
```

1. chrono의 강력한 자연어 날짜 파싱 능력을 활용.
2. inclusive-dates는 이를 사용자 친화적이고 접근성 높은 UI 컴포넌트로 구현.

이러한 조합을 통해, 개발자들은 사용자에게 직관적이고 유연한 날짜 입력 방식을 제공하면서도 접근성과 사용성을 높일 수 있음.

---

[^304-1]: [executeParser](https://github.com/wanasit/chrono/blob/master/src/chrono.ts#L83)
[^304-2]: [sort](https://github.com/wanasit/chrono/blob/master/src/chrono.ts#L87)
[^304-3]: [refine](https://github.com/wanasit/chrono/blob/master/src/chrono.ts#L92)