[Vue.js] v-date-picker 평일만 선택하기

vue.js에서 달력을 사용해서, 예약을 진행하는 서비스를 만들고 있는데,

 

주말에는 아예 예약이 안되게 v-date-picker에서 주말은 disabled 시키고 싶었다.

 

그래서 짜본 코드

 

소스코드

date() {
    return {
        days: ["월", "화", "수", "목", "금"],
    }
}
 
methods: {
    allowedDates (val) { 
          for (var i = 0; i < this.days.length; i++) {
              if(DateUtils.getDayOfWeek(val) === this.days[i]) {
                  return DateUtils.getDayOfWeek(val) === this.days[i];
              }
          }
    },
}
 
 

 

DateUtils.getDayOfWeek

getDayOfWeek: date => {
    const week = ['일', '월', '화', '수', '목', '금', '토']
    return week[new Date(date).getDay()]
},

 

v-date-picker에서 ':allowed-dates="allowedDates" 옵션을 줘야 한다.

 

결과

과거 날짜 disabled는 다음에,

 

끝~