반응형
<!-- 예약 일정 및 시간 -->
<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;
},
반응형
'프로그래밍' 카테고리의 다른 글
[vue3 + spring boot] 클라이언트와 서버 형식이 다를 때 (0) | 2024.05.14 |
---|---|
[Axios] Error 415 Content-Type 수정 필요 (0) | 2024.05.13 |
[github] 저장소(repository) 삭제 방법 (0) | 2024.04.22 |
[github] 깃허브 꾸미기 (배지, 스탯 위젯, 헤더) (0) | 2024.04.21 |
[postgreSQL] DB에 txt 파일 업로드하기 (0) | 2024.04.01 |
댓글