개발환경

• Nuxt, PrimeVue3 사용, CSR

---

요구 사항

• Date를 일일이 설정해주기에는 귀찮으니까 Slide Bar 형태로 주, 일, 시 단위로 해달라는 요구

---

해결방법

• DropDown으로 주, 일, 시를 결정하고 그에 맞춰 Slide Bar와 달력이 반응하도록 구현

Source Code

<Dropdown v-model="calSlideStep" :options="calSlideSteps" optionLabel="label" optionValue="value" placeholder="Select a Date"
  class="mr-5 border-blue-500" />

<Slider v-model="calSlide" :min="Date.parse([Date 형식의 변수])" :max="Date.parse([Date 형식의 변수)" :step="calSlideStep" :range="true"
  class="w-full bg-black-alpha-60" @change="changeCalDate()" />

const calSlide = ref([]);
const calSlideStep = ref(1000 * 60 * 60);
const calSlideSteps = ref([
  {label: "Week",    value: 1000 * 60 * 60 * 24 * 7},
  {label: "Day",     value: 1000 * 60 * 60 * 24},
  {label: "Hours",   value: 1000 * 60 * 60},
])

const changeCalDate = () => {
  // 변할 때 마다 달력에 실시간으로 값을 반영해주어야한다.
}

참조

• PrimeVUE slidebar