[Vue.js] dayjs 날짜 제약조건 걸기, 날짜 비교

날짜 받아오는 방법

일반 html이랑 같게 input type="date"로 작성하면 된다. 부트스트랩을 사용해서인가 이미 우측과 같은 모양으로 날짜 선택이 가능하였다.

 

<input type="date" class="form-control" v-model="recruit_endperiod" required>

 

 

 

오늘 이전 날짜 제한

 

input date에 :min으로 동적 속성 부여. :min="minDate"

:min 속성 또는 v-bind:min 디렉티브: :min 속성은 Vue.js의 데이터와 연동되어 동적인 값을 가진다. 데이터의 변경에 따라 속성 값이 업데이트되며, 데이터의 변경에 따라 동적으로 속성이 반영된다.

 

computed에 minDate를 정의해준다.

 

 

<template>
	<input type="date" class="form-control" v-model="recruit_endperiod" required :min="minDate">
</template>
<script>
import dayjs from 'dayjs'
export default {
    computed: {
        minDate() {
            return dayjs().format('YYYY-MM-DD');
        },
    }
}
</script>

 

 

 

며칠 이후부터 선택 가능한 제약조건

'n' 부분에 원하는 날짜를 입력하여, 위의 포맷에 return 부분을 변경해준다.

dayjs().add(n, 'day').format('YYYY-MM-DD')

 

 

 

 

 

입력받는 a 날짜 이후로 b 날짜 선택

예를 들어, 구독 시작일이 모집 마감일 이후여야 한다는 제약조건을 걸어야할 때의 상황이다.

1. date에 computed 조건을 건다.
2. computed 조건에 비교할 날짜를 넣는다.
3. watch 속성을 이용해 제약 조건이 잘 작동하는지 감시한다.
4. isSameorBefore 은 dayjs의 라이브러리 메서드이다.

 

<template>
  <!-- ... -->
  <div class="row align-items-center">
    <div class="col">
      <label for="floatingInputValue" class="form-label">구독 시작일</label>
      <input type="date" class="form-control" v-model="subscribe_startdate" required :min="minStartDate" />
    </div>
    <!-- ... -->
  </div>
  <!-- ... -->
</template>

<script>
import dayjs from 'dayjs';

export default {
  // ...
  watch: {
    subscribe_startdate(value) {
      this.formValidated = !!value;
      this.checkStartDate();
    },
    recruit_endperiod(value) {
      this.formValidated = !!value;
      this.checkStartDate();
    },
  },
  computed: {
    minStartDate() {
      return dayjs(this.recruit_endperiod).add(1, 'day').format('YYYY-MM-DD');
    },
  },
  methods: {
    checkStartDate() {
      if (dayjs(this.subscribe_startdate).isSameOrBefore(this.recruit_endperiod)) {
        alert('구독 시작일은 모집 마감일 이후여야 합니다.');
      }
    },
    // ...
  },
  // ...
};
</script>

 

 

 

 

 

 

 

⬇️ 더많은 Dayjs 설명서 보기

GitHub - iamkun/dayjs: ⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API