Vue Datepicker Range

vuetify 3버전을 이용한 프로젝트 진행 중 range datepicker가 필요했는데, vuetify 3버전에서는 range기능을 제공하지 않아서 Vue DatePicker를 사용하게 되었다.

Vue DatePicker 공식문서

1. install

npm install @vuepic/vue-datepicker

2. main.js 설정

import "@vuepic/vue-datepicker/dist/main.css";
import VueDatePicker from "@vuepic/vue-datepicker";
.
.
.
app.component("VueDatePicker", VueDatePicker);

3. 공통으로 사용할 수 있도록 컴포넌트 만들기 (DatePickerRange.vue)

<template>
  <div>
    <VueDatePicker
      range
      locale="ko"
      v-model="date"
      :format="dateRangeFormat"
      :enable-time-picker="false"
      @update:model-value="handleDate"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, defineEmits } from "vue";
import VueDatePicker from "@vuepic/vue-datepicker";

const emit = defineEmits(["handleDateChange"]);

const date = ref();

const handleDate = (modelData) => {
  let days = "";

  for (let rangeDate of modelData) {
    const date = new Date(rangeDate);

    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, "0");
    const day = date.getDate().toString().padStart(2, "0");
    const formattedDate = `${year}-${month}-${day}`;

    days = days += `-${formattedDate}`;
  }

  date.value = modelData;
};

onMounted(() => {
  const startDate = new Date();
  const endDate = new Date(new Date().setDate(startDate.getDate() + 7));
  date.value = [startDate, endDate];
});

const dateRangeFormat = (value) => {
  const startDate = value[0];
  const endDate = value[1];

  if (startDate && endDate) {
    const startYear = startDate.getFullYear();
    const startMonth = (startDate.getMonth() + 1).toString().padStart(2, "0");
    const startDay = startDate.getDate().toString().padStart(2, "0");

    const endYear = endDate.getFullYear();
    const endMonth = (endDate.getMonth() + 1).toString().padStart(2, "0");
    const endDay = endDate.getDate().toString().padStart(2, "0");

    emit(
      "handleDateChange",
      `${startYear}-${startMonth}-${startDay}-${endYear}-${endMonth}-${endDay}`
    );

    return `${startYear}-${startMonth}-${startDay}-${endYear}-${endMonth}-${endDay}`;
  }
};
</script>

4. DatePicker.vue 컴포넌트 사용

<template>
	<date-picker-range @handleDateChange="handleDateChange" />
</template>

<script>
import DatePickerRange from "@/components/common/DatePickerRange.vue";

export default {
	components: { DatePickerRange },

	methods: {
		handleDateChange(value) {
			// datepicker 이벤트 처리
		},
    }
}
</script>