VueJS use v-model on custom component date time picker

Question

I want to use v-model on my custom datetime component like this :

<date-time-picker v-model="startDate" label="Start date"></date-time-picker>

So what I did inside my DateTimePicker.vue is :

<template>
  <v-menu v-model="menu" :close-on-content-click="false" full-width max-width="290" transition="scale-transition">
    <!-- Text field -->
    <v-text-field slot="activator" :label="label" append-icon="date_range" solo
                  :value="formattedDate" @input="handleDateTime"></v-text-field>

    <!-- Date picker -->
    <v-date-picker v-model="selectedDate" locale="fr-fr" v-if="datePicker" :min="todayDate">
      <v-spacer></v-spacer>
      <v-btn flat color="primary" @click="menu = false">Cancel</v-btn>
      <v-btn flat color="primary" @click="chooseDate">OK</v-btn>
    </v-date-picker>

    <!-- Time picker -->
    <v-time-picker v-if="!datePicker" v-model="selectedTime" full-width format="24hr" :min="todayTime">
      <v-spacer></v-spacer>
      <v-btn flat color="primary" @click="menu = false">Cancel</v-btn>
      <v-btn flat color="primary" @click="chooseTime">OK</v-btn>
    </v-time-picker>
  </v-menu>
</template>

<script>
  import format from 'date-fns/format'

  export default {
    name: "DateTimePicker",
    props: ['label', 'value'],
    data() {
      const todayDate = new Date().toISOString().substr(0, 10);
      const todayTime = new Date().getHours() + ':' + new Date().getMinutes();

      return {
        dateValue: '',
        timeValue: '',
        todayDate,
        todayTime,
        selectedDate: todayDate,
        selectedTime: todayTime,
        datePicker: true,
        timePicker: false,
        menu: false
      }
    },
    methods: {
      // Triggered by clicking on OK button inside Datepicker
      chooseDate: function () {
        this.dateValue = this.selectedDate;
        this.datePicker = false;
      },
      // Triggered by clicking on OK button inside Timepicker
      chooseTime: function () {
        this.timeValue = this.selectedTime;
        this.menu = false;
      },
      handleDateTime: function () {
        this.$emit('input', this.formattedDate);
      }
    },
    computed: {
      // Format date
      formattedDate() {
        return this.dateValue && this.timeValue ? format(this.dateValue, 'DD/MM/YYYY') + ' at ' + this.timeValue : '';
      }
    },
    watch: {
      // Display date picker when the menu is closed
      menu: function (opened) {
        if (!opened) this.datePicker = true;
      }
    }
  }
</script>

<style scoped>

</style>

But the @input event is not triggered when I choose the date so handleDateTime is never called. I don't understand what is wrong can you help me ? Or maybe it's impossible to use v-model on my component and I have to use another way ?

Answer 1

You keep the code of the parent code like you did :

<date-time-picker v-model="startDate" label="Start date"></date-time-picker>

in the child component add a watcher for formattedDate property as follows :

   watch:{
       ....
     formattedDate(v) {
        this.$emit('input', this.formattedDate)
    }

   }

full running code