[Vuetify] DateTimeField

DateTimeField.vue

<template>
  <div>
    <v-text-field
      class="v-date-field"
      :class="{ 'v-date-field--rounded': rounded }"
      :value="dateFormated"
      prepend-inner-icon="mdi-calendar-blank"
      readonly
      @click="open"
      :disabled="disabled"
      v-bind="$attrs"
      v-on="$listeners"
    />

    <v-dialog v-model="dialog" width="290px">
      <v-card>
        <v-tabs v-model="tab" grow>
          <v-tab>
            {{ $t("date") }}
          </v-tab>
          <v-tab-item>
            <v-date-picker
              v-model="date"
              full-width
              locale="fr"
              first-day-of-week="0"
              @input="tab = 1"
            ></v-date-picker>
          </v-tab-item>
          <v-tab>
            {{ $t("time") }}
          </v-tab>
          <v-tab-item>
            <v-time-picker
              v-model="time"
              full-width
              format="24hr"
            ></v-time-picker>
          </v-tab-item>
        </v-tabs>

        <v-card-actions class="justify-space-between">
          <v-btn text @click="close">Fermer</v-btn>
          <v-btn color="primary" text @click="submit">OK</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import { format, isValid, parseISO } from "date-fns";
import fr from "date-fns/locale/fr";

export default {
  props: {
    rounded: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: Date,
      default: new Date()
    }
  },

  i18n: {
    messages: {
      fr: {
        date: "Date",
        time: "Temps"
      }
    }
  },

  data() {
    return {
      tab: 0,
      dialog: false,
      date: null,
      time: null
    };
  },

  watch: {
    value: {
      immediate: true,
      handler() {
        if (!isValid(this.value)) return;

        this.date = format(this.value, "yyyy-MM-dd");
        this.time = format(this.value, "hh:mm");
      }
    }
  },

  computed: {
    dateFormated() {
      return isValid(this.value)
        ? format(this.value, "PPPp", { locale: fr })
        : "";
    }
  },

  methods: {
    open() {
      if (!this.disabled) this.dialog = true;
    },
    close() {
      this.dialog = false;
    },
    submit() {
      const d = parseISO(`${this.date} ${this.time}`);

      if (isValid(d)) {
        this.$emit("input", d);
        this.close();
      }
    }
  }
};
</script>