[Vue.js] (Vuetify) 커스텀 Time Picker 컴포넌트 만들기

Vuetify의 v-text-field와 v-time-picker, v-dialog를 활용하여 text field를 클릭하면 time picker를 띄우고, 사용자가 시간을 입력하면 텍스트 인풋에 그 값이 들어가도록 하는 커스텀 컴포넌트를 만들어본다.

텍스트 필드를 클릭하면

time picker가 뜨고 입력하면 시간이 text field에 들어간다.

# TimePicker.vue

<template>
  <v-col cols="4" sm="6" md="4">
    <v-dialog
      ref="dialog"
      v-model="timeModal"
      :return-value.sync="time"
      persistent
      width="290px"
    >
      <template v-slot:activator="{ on }">
        <v-text-field
          v-model="time"
          readonly
          v-on="on"
        ></v-text-field>
      </template>
      <v-time-picker
        v-show="timeModal"
        v-model="time"
        full-width
        :allowed-minutes="(m) => m % 5 === 0"
      >
        <v-spacer></v-spacer>
        <v-btn text color="primary" @click="timeModal = false">Cancel</v-btn>
        <v-btn text color="primary" @click="setTime">OK</v-btn>
      </v-time-picker>
    </v-dialog>
  </v-col>
</template>

<script>
export default {
  data() {
    return {
      time: "",
      timeModal: false,
    };
  },
  methods: {
    setTime() {
      this.$refs.dialog.save(this.time);
      this.$emit("time-from-picker", this.time);
    },
  },
};
</script>

allowed-minutes는 특정 함수를 전달해주면 time picker의 시간 단위를 제한할 수 있다.

(위 처럼 적용하면 5분 단위만 선택 가능)

 

해당 컴포넌트에서 받은 time 상태를 emit을 통해 상위 컴포넌트로 넘겨주면 다른곳에서 text field 값을 사용할 수 있다.