# Moment.js로 날짜 데이터를 자유롭게 입력해요

**URL:** <https://ask.selectfromuser.com/t/moment-js/40>\
**Category:** 사용 팁\
**Tags:** params, defaultvaluefn, date-format\
**Created:** [6월 22, 2023, 8:06오전 UTC](https://ask.selectfromuser.com/t/moment-js/40 "2023-06-22T08:06:29Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![hbkim](https://yyz2.discourse-cdn.com/flex032/user_avatar/ask.selectfromuser.com/hbkim/32/23_2.png) [@hbkim](https://ask.selectfromuser.com/u/hbkim)\
**Post date:** [6월 22, 2023, 8:06오전 UTC](https://ask.selectfromuser.com/t/moment-js/40/1 "2023-06-22T08:06:29Z")

</div>

셀렉트에서는 [Moment.js](https://momentjs.com/docs/#/manipulating/)로 날짜 데이터를 특정 조건에 따라 입력할 수 있습니다.

해당 서비스를 통해 일/주/월/연 단위로 시작 날짜나 끝 날짜를 지정하거나 날짜 값을 추가하고 뺄 수 있습니다.

### 예제

당일(6월 26일) 기준으로 "다음주 월요일 ~ 다음주 일요일"의 날짜를 기본값으로 넣습니다.

 ![image](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/acc06c261a4ada36bb08e66f3740801610cdb4ff.png)

파라미터(params) 안에 `defaultValueFn`과 함께 Moment.js를 이용합니다.

```yaml
params:
- key: dateFromTo
  label: 조회기간
  format: date
  range: true
  showButtons: true
  # dateFromTo1과 dateFromTo2로 순서대로 값이 들어갑니다. 
  # Moment.js로 작동합니다.
  defaultValueFn: |
    return [
      moment().add(1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD'),
      moment().add(1, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD'),
    ]
  shortcuts:
  - label: 지난주
    relative: true # 상대적으로 처리. 여러번 클릭 가능
    from:
      offset: -7 # 차이값 (오프셋)
      period: day # 단위
    to:
      offset: -7
      period: day
  - label: 다음주
    relative: true
    from:
      offset: 7
      period: day
    to:
      offset: 7
      period: day

```

---

<div class="post-metadata">

**Author:** ![jhlee](https://yyz2.discourse-cdn.com/flex032/user_avatar/ask.selectfromuser.com/jhlee/32/20_2.png) [@jhlee](https://ask.selectfromuser.com/u/jhlee)\
**Post date:** [6월 22, 2023, 2:39오후 UTC](https://ask.selectfromuser.com/t/moment-js/40/2 "2023-06-22T14:39:22Z")

</div>

오늘  
`moment().format('YYYY-MM-DD')`  
내일  
`moment().add(1, 'day').format('YYYY-MM-DD')`  
다음주  
`moment().add(1, 'week').format('YYYY-MM-DD')`  
다음달  
`moment().add(1, 'month').format('YYYY-MM-DD')`  
이번달 시작일  
`moment().startOf('month').format('YYYY-MM-DD')`  
이번달 마지막일  
`moment().endOf('month').format('YYYY-MM-DD')`  
이번주 시작일  
`moment().startOf('week').format('YYYY-MM-DD')` \*일요일 기준

---

<div class="post-metadata">

**Author:** ![jhlee](https://yyz2.discourse-cdn.com/flex032/user_avatar/ask.selectfromuser.com/jhlee/32/20_2.png) [@jhlee](https://ask.selectfromuser.com/u/jhlee)\
**Post date:** [6월 22, 2023, 2:39오후 UTC](https://ask.selectfromuser.com/t/moment-js/40/3 "2023-06-22T14:39:49Z")

</div>

사실 Luxon도 됩니다.

> **[luxon - Immutable date wrapper](https://moment.github.io/luxon/#/tour)**
>
> Immutable date wrapper

> **[GitHub - moment/luxon: ⏱ A library for working with dates and times in JS](https://github.com/moment/luxon)**
>
> ⏱ A library for working with dates and times in JS - GitHub - moment/luxon: ⏱ A library for working with dates and times in JS

오늘 `DateTime.now().toFormat('yyyy-MM-dd')`