[Vue.js] dayjs 날짜 제약 조건 feat. 이전 날짜 선택 불가

[학습배경] 

프로젝트를 하는데 오늘 날짜 이전과 오늘 날짜 이후만 선택하게 하고 싶었다. 예전에 이클립스에서 날짜제약 조건 하는 것을 JavaScript로 해봤는데 그것도 같이 정리하면서 Vue.js에서는 dayjs를 이용하여 더욱 간편하게 사용할 수 있는 방법을 포스팅해보려고 한다. 

 

[기존] 

 

직접 입력 

정해진 원하는 날짜가 있을 때는 min 과 max를 이용하여 직접 날짜 입력이 가능하다. 물론 min 만 작성하거나 max만 작성해도 된다. 

<label>min과 max 제한이 있는 날짜 선택 
  <input type="date" name="schedule" min="2023-04-10" max="2023-04-28" />
</label>

<label> min 제한만 있는 날짜 선택 
  <input type="date" name="schedule" min="2023-08-20"  />
</label>

 

 

JavaScript

하지만 위와 같이 정해진 날짜에 제약을 거는 것이 쓰이는 것은 굉장히 흔치 않다. 날짜를 직접 입력하게 되면 일회성 느낌이 너무 강한 코드 같달까. 그래서 오늘을 기준으로 날짜에 제약을 거는 JavaScript 코드가 있다. 

<label>일정을 추가할 날짜를 선택하세요.
  <input type="date" id="Date" />
</label>

var now_utc = Date.now()
var timeOff = new Date().getTimezoneOffset()*60000;
var today = new Date(now_utc-timeOff).toISOString().split("T")[0];
document.getElementById("Date").setAttribute("max", today);

• var now_utc = Date.now();: 현재 UTC 시간을 밀리초 단위로 가져온다. 
• var timeOff = new Date().getTimezoneOffset() * 60000;: JavaScript의 getTimezoneOffset() 메서드는 현재 시간대의 분 단위 오프셋을 반환하며, 이를 밀리초 단위로 변환하는 기능이다. 이 코드는 즉 현재 시스템의 현재 오프셋을 밀리초로 계산하게 되는 것이다. 이 값은 로컬 시간대와 UTC 시간대의 차이를 나타낸다.
• var today = new Date(now_utc - timeOff).toISOString().split("T")[0];: 현재 UTC 시간에서 오프셋을 뺀 값을 사용하여 오늘 날짜의 UTC 표준 시간을 계산한다. 그리고 이를 "yyyy-mm-dd" 형식으로 변환한다.  즉, new Date(now_utc-timeOff). toISOString()은 '2023-08-16T 18:09:38.134Z'를 반환하게 된다. 그래서. toISOString() 메서드를 이용해 날짜 객체를 ISO 8601 형식의 문자열로 변환하며,. split("T")[0]을 사용하여 시간 부분을 제거하고 날짜 부분만 추출하게 된다.
• document.getElementById("Date"). setAttribute("max", today);: JavaScript를 사용하여 "Date" id를 가진 HTML 요소의 max 속성을 오늘 날짜로 설정하고 이렇게 하면 사용자는 오늘 날짜 이후의 날짜를 선택할 수 없다.

그전까진 이렇게 JavaScript를 이용하여 이렇게 사용해 왔었는데 dayjs를 알아버렸기 때문에 이번에 vue에서 사용할 때는 조금 더 간편하게 날짜에 제약조건을 걸어주었다. 

 

 

[Vue.js] 

 

dayjs 를 이용하여 오늘날짜 이전은 선택할 수 없게 만들어 놓은 것이다. 

<template>
    <div>
<input type="date" :min="minDate" v-model="subStart">
</div> 
</template>

<script>
import dayjs from 'dayjs'
export default {
    name: 'HostBoardAdd',
    data() {
        return {
        subStart : null; 
        }
     },
    computed: {
        minDate() {
            return dayjs().format('YYYY-MM-DD');
        },
        }
      }
</script>

 

:min="minDate"는 최소 날짜 제한을 설정한다. minDate는 아래의 computed 속성을 통해 계산되게 된다.

computed 에 dayjs()를 입력하면 오늘 날짜를 반환하고 dayjs(). format('YYYY-MM-DD'); 를 통해 현재 날짜를 'YYYY-MM-DD' 형식으로 반환한다. 

 

vue.js와 dayjs를 사용하여 코드가 한결 가볍고 깨끗해졌다!