[VueJS] Vuetify v-datepicker min, max 속성 활용하기

만들다 보면 시작일과 종료일을 선택하는 기능을 만들어야 하는 상황이 분명 생길 수 있다.

그리고 시작일이 종료일보다 높은 날짜가 선택되거나, 종료일이 시작일보다 낮은 날짜가 선택되는 등의 상황이 나오면 분명 이야기가 나올 수 있기 때문에 그걸 제한하는 기능을 추가적으로 작성해줘야 한다.

vuetify에서 제공하는 v-datepicker 속성 중에 min, max를 쓰면 쉽게 구현이 가능하다.

---

vuetify의 v-datepicker

우선 예제로 구현한 모습이고

템플릿 소스

<v-row>
  <v-col cols="12" lg="2">
    <v-menu
      ref="menu1"
      v-model="menu1"
      :close-on-content-click="false"
      :return-value.sync="s_date"
      transition="scale-transition"
      offset-y
      min-width="290px"
    >
      <template v-slot:activator="{ on, attrs }">
        <v-text-field
          v-model="s_date"
          prepend-icon="mdi-calendar"
          readonly
          v-bind="attrs"
          v-on="on"
        ></v-text-field>
      </template>
      <v-date-picker v-model="s_date" no-title scrollable :max="e_date">
        <v-spacer></v-spacer>
        <v-btn text color="primary" @click="menu1 = false">Cancel</v-btn>
        <v-btn text color="primary" @click="s_date_search(s_date)">OK</v-btn>
      </v-date-picker>
    </v-menu>
  </v-col>
  
  <v-col cols="12" lg="2">
    <v-menu
      ref="menu2"
      v-model="menu2"
      :close-on-content-click="false"
      :return-value.sync="e_date"
      transition="scale-transition"
      offset-y
      min-width="290px"
    >
      <template v-slot:activator="{ on, attrs }">
        <v-text-field
          v-model="e_date"
          prepend-icon="mdi-calendar"
          readonly
          v-bind="attrs"
          v-on="on"
        ></v-text-field>
      </template>
      <v-date-picker v-model="e_date" no-title scrollable :min="s_date" :max="date">
        <v-spacer></v-spacer>
        <v-btn text color="primary" @click="menu2 = false">Cancel</v-btn>
        <v-btn text color="primary" @click="e_date_search(e_date)">OK</v-btn>
      </v-date-picker>
    </v-menu>
  </v-col>
</v-row

v-menu에 슬롯으로 넣지 않으면 달력 상태로 화면에 보이기 때문에 위 사진처럼 보이려면 v-menu에 넣는 식으로 만들어 주어야 한다.

 

script 부분

<script>
export default {
  data() {
    return {
      date: new Date().toISOString().substr(0, 10),
      s_date: new Date().toISOString().substr(0, 10),
      e_date: new Date().toISOString().substr(0, 10),
      menu1: false,
      menu2: false
    }
  },
  methods: {
    s_date_search(v) {
      this.s_date = v;
      this.menu1 = false;
      this.$refs.menu1.save(v);
    },
    e_date_search(v) {
      this.e_date = v;
      this.menu2 = false;
      this.$refs.menu2.save(v);
    }
  },
}
</script>

우선 기본 날짜 값은 오늘로 지정해두었다. 시작일을 바꾸고 싶으면 s_date 부분을 수정하면 된다.

 

구현된 화면

시작일은 종료일보다 높게 선택할 수 없는 걸 볼 수 있다.

종료일은 시작일보다 작게 선택할 수 없다.

그리고 종료일 v-datepicker에도 max로 현재 날짜를 지정해놔서 오늘 이후의 날짜를 선택할 수 없게 해 놨는데

이 부분은 풀고 싶으면 종료일 쪽 v-datepicker의 :max를 삭제하거나 다른 날짜를 넣어서 제한 범위를 수정할 수 있다.

시작일을 5일로 변경 후 종료일 v-datepicker 화면

 

---

이런 식으로 활용이 가능하다.

예전에 jQuery 기반 datepicker 라이브러리를 썼었을 때 거기서 제공하는 min, max 기능은 있어도 사용하기엔 좀 불편함이 있었는데

vuetify는 아주 편하게 사용할 수 있게 제공한다.