Vue2-datepicker 한글 커스텀하기

https://www.npmjs.com/package/vue2-datepicker

vue2-datepicker

 

깃레포지토리에 가면 언어 설정하는 법에 관해 더 자세하게 나와있다.

스타일링은 vue2-datepicker/scss/index.scss 파일 안의 클래스 이름 확인 후 오버라이딩시켜주면 된다.

다만, 지역scope가 아닌 전역으로 스타일을 적용해줘야 한다.

<template>
  <div>
    <date-picker
      v-model="start"
      :lang="lang"
      :get-classes="getRangeClasses"
      :disabled-date="disabledStartDate"
      placeholder="조회기간"
    ></date-picker>
    <em>~</em>
    <date-picker
      v-model="end"
      :lang="lang"
      :get-classes="getRangeClasses"
      :disabled-date="disabledEndDate"
      placeholder="조회기간"
    ></date-picker>
    <button type="button" @click="setPeriod(0)">당일</button>
    <button type="button" @click="setPeriod(1)">1개월</button>
    <button type="button" @click="setPeriod(12)">1년</button>
    <button type="button" @click="onSearch()">조회</button>
  </div>
</template>

// 스크립트 작성
<script>
import DatePicker from "vue2-datepicker";
import "vue2-datepicker/scss/index.scss";
export default {
  components: { DatePicker },
  props: ["target"],
  data() {
    return {
      test: 1,
      start: null,
      end: null,
      lang: {
        days: ["일", "월", "화", "수", "목", "금", "토"],
        months: [
          "1월",
          "2월",
          "3월",
          "4월",
          "5월",
          "6월",
          "7월",
          "8월",
          "9월",
          "10월",
          "11월",
          "12월",
        ],
        yearFormat: "YYYY년",
        monthFormat: "MM월",
        // the calendar title of month before year
        monthBeforeYear: false,
      },
    };
  },
  methods: {
    getRangeClasses(cellDate, currentDates, classnames) {
      const classes = [];
      const start = this.start && new Date(this.start);
      const end = this.end && new Date(this.end);
      if (
        !/disabled|active|not-current-month/.test(classnames) &&
        start &&
        end &&
        cellDate.getTime() >= start &&
        cellDate.getTime() <= end
      ) {
        classes.push("in-range");
      }
      return classes;
    },
    disabledStartDate(date) {
      return this.end && new Date(date) > new Date(this.end);
    },
    disabledEndDate(date) {
      return this.start && new Date(date) < new Date(this.start);
    },
    setPeriod(m) {
      const period = new Date();
      period.setMonth(period.getMonth() - m);
      this.start = period;
      this.end = new Date();
    },
    onSearch() {
      if (!this.start || !this.end) {
        alert("조회기간을 설정해주세요");
      }
    },
  },
};
</script>

// 스타일 커스텀
<style lang="scss">
/* vue2-datepicker 스타일 오버라이딩 */
/* #주의# 스타일 오버라이딩하기 위해서는 style scoped가 아닌 전역으로 설정해줘야 한다. */
/* input 크기 스타일링 */
.mx-datepicker {
  width: 140px !important;
  height: 40px !important;
  margin-right: 8px;
  .mx-input {
    width: 140px !important;
    height: 40px !important;
  }
}
/* 애니메이션 스타일링 제거 */
.mx-zoom-in-down-enter-active,
.mx-zoom-in-down-leave-active,
.mx-zoom-in-down-enter,
.mx-zoom-in-down-enter-from,
.mx-zoom-in-down-leave-to {
  transform: none !important;
}
/* 특정요일만 색상변경 스타일링 (1~7)*/
/* td.cell:nth-child(1) {
  color: #e99b9b !important;
} 
*/
</style>