본문 바로가기
프로그래밍

vue3 달력 라이브러리 (vue3-datepicker) 오늘 이전 날짜 비활성화

by 개발자신입 2024. 5. 9.
반응형
<!-- 예약 일정 및 시간 -->
        <div class="mb-3 row">
        <label class="form-label col-sm-2">예약 일정 및 시간</label>
        <div class="col-sm-10 d-flex align-items-center">
          <vue3-datepicker 
          v-model="selectedDate" 
          :disabledDates="{ predicate: isTodayOver }"
          format="yyyy-MM-dd" 
          placeholder="날짜 선택" class="me-2"></vue3-datepicker>
          <div class="time-selection d-flex">
      <button 
        v-for="time in availableTimes" 
        :key="time" 
        :value="time" 
        @click="selectedTime = time"
        :class="['time-button', {'selected': time === selectedTime}]">
        {{ time }}
      </button>
      </div>
        </div>
      </div>
      
      
<!-- 예약 일정 및 시간 script -->
      setup() {
    const selectedDate = ref(null);
    const availableTimes = ['10:00', '12:00', '14:00', '16:00'];
    const selectedTime = ref(null);

    const isTodayOver = (date) => {
      return date < new Date();
    };
    return {
      selectedDate,
      availableTimes,
      selectedTime,
      ageOptions,
      isTodayOver
    };
  },
  
  methods: {
        selectTime(time) {
      this.selectedTime = time;
    },

반응형

댓글