[Vuetify] DatePicker + TimePicker

환경

- Node v10.16.0

- Vuetify2

결과물

 

 날짜와 시간을 함께 선택 하여 사용하고 싶어서 Vuetify에 Date Picker와 TimePicker 예제를 합쳐 보았습니다.

(2020-07-13 12:37) 와 같은 형식의 산출물

 

Page.vue

<template>
  <v-app id="inspire">
    <v-container fluid class="pa-0">
      <v-row>
        <DateTimePicker :label="'시작날짜'"></DateTimePicker>
        <DateTimePicker :label="'종료날짜'"></DateTimePicker>
      </v-row>
    </v-container>
  </v-app>
</template>

<script>
import DateTimePicker from "./DateTimePicker.vue";

export default {
  name: "Page",
  components: {
    DateTimePicker
  }

}
</script>

DateTimePicker 컴포넌트를 불러옵니다.

 

 

 

DateTimePicker.vue

<template>
  <v-col cols="4" sm="6" md="4">
    <v-dialog
      ref="dialog"
      v-model="dateModal"
      :return-value.sync="date"
      persistent
      lazy
      full-width
      width="290px"
    >
      <template v-slot:activator="{ on }">
        <v-text-field
          v-model="date"
          :label="`${label}`"
          prepend-icon="event"
          readonly
          v-on="on"
        ></v-text-field>
      </template>
      <v-date-picker v-model="date" scrollable>
        <v-spacer></v-spacer>
        <v-btn flat color="primary" @click="dateModal = false">Cancel</v-btn>
        <v-btn flat color="primary" @click="timeModal = true">OK</v-btn>
      </v-date-picker>
    </v-dialog>

    <v-dialog
      ref="dialog2"
      v-model="timeModal"
      :return-value.sync="time"
      persistent
      lazy
      full-width
      width="290px"
    >
      <v-time-picker
        v-if="timeModal"
        v-model="time"
        full-width
      >
        <v-spacer></v-spacer>
        <v-btn flat color="primary" @click="timeModal = false">Cancel</v-btn>
        <v-btn flat color="primary" @click="set()">OK</v-btn>
      </v-time-picker>
    </v-dialog>
  </v-col>
</template>

<script>

export default {
  name: "DateTimePicker",
  props: ['label'],
  data: () => ({
    date: "",
    dateModal: false,
    time: "",
    timeModal: false,
  }),
  methods: {
    set() {
      this.date = this.date +" "+ this.time;
      this.$refs.dialog.save(this.date);
      this.$refs.dialog2.save(this.time);
    }
  }
}
</script>

set() 함수에서 2020-07-16 04:22 형식으로 date 변수에 담깁니다.

 

 

 

 

참고 자료

https://vuetifyjs.com/ko/components/date-pickers/

Date picker component — Vuetify.js

https://vuetifyjs.com/ko/components/time-pickers/

Time picker component — Vuetify.js

 

전체 소스

https://github.com/Jo-App/vuetify_date_time_picker

Jo-App/vuetify_date_time_picker