[vue3] DatePicker 사용하기

 

개발 환경

---------------------------------

OS : Mac

개발 툴 : intelliJ

개발 언어 : java

프레임워크 : vue.js

---------------------------------

 

templete 단에서 VueDatePicker를 사용하는 방법

 

<VueDatePicker
    v-model="showStartDate"
    locale="ko"
    :format="formatDate"
    :enable-time-picker="false"
    week-start="0"
    position="left"
    placeholder="날짜를 선택하세요."
    auto-apply
/>

 

속성에 range를 추가하면 날짜 범위를 선택할 수 있다.

 

아래 코드는 선택된 날짜를 받아와서 원하는 방식으로 포맷해준다.

 

const formatDate = (date) => {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();

  // 날짜 앞에 0을 붙여야 하는 경우
  if (month || day < 10) {
    const zeroDay = ('00' + day).slice(-2);
    const zeroMonth = ('00' + month).slice(-2);

    return `${year}.${zeroMonth}.${zeroDay}`;
  } else {

    return `${year}.${month}.${day}`;
  }
}