[VCalendar] V-Calendar을 이용한 날짜 input 창

https://vcalendar.io/

Welcome | VCalendar

 

 

 

예시

v-calendar을 이용한 날짜 input창

 

먼저 이전 포스팅에서처럼  v-calendar을 설치하고 세팅을해주어야한다.

https://islet4you.tistory.com/entry/v-calendar-Nuxt3%EC%97%90%EC%84%9C-V-calendar-%EC%84%B8%ED%8C%85

[v-calendar] Nuxt3에서 V-calendar 세팅

 

 

이후 추가적으로 vue-screen-utils를 설치해준다.

yarn add vue-screen-utils

또는

npm i vue-screen-utils

 

 

<template> 내부에 자식요소로 input 태그를 넣어서 사용할 수 있으며, 캘린더에서 선택한 날짜는 inputValue를 통해서 받아와서 사용할 수 있다.

<template>
    <ClientOnly>
      <DatePicker v-model="range" :columns="columns" :disabled-dates="disabledDates" is-range>
        <template #default="{ inputValue, inputEvents }">
          <div class="flex justify-center items-center">
            <input :value="`${inputValue.start} ~ ${inputValue.end}`" v-on="inputEvents.start" />
          </div>
        </template>
      </DatePicker>
    </ClientOnly>
</template>

<script setup>
import { useScreens } from 'vue-screen-utils';

const { mapCurrent } = useScreens({ xs: '0px', sm: '640px', md: '768px', lg: '1024px' });
const columns = mapCurrent({ lg: 2 }, 1);
const disabledDates = ref({ start: new Date(), end: null }); // 날짜 제한
const range = ref({
  start: new Date(),
  end: new Date(),
});
</script>

<style scoped>
input {
  padding: 4px 10px;
  border: 2px solid #1a237e;
  border-radius: 4px;
}
</style>

 

 

 

그외 다양한 예시는 아래 V-Calendar사이트에서 확인 할 수있다.

https://vcalendar.io/datepicker/slot-content.html

Slot Content | VCalendar