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 ?

i created vuetify boilerplate please add what's missing in order to debug it codesandbox.io/s/5k254z99kx — Boussadjra Brahim
– Boussadjra Brahim, Commented Jan 21, 2019 at 13:28
Thanks. It's ok we have all things we need. So stateDate v-model works for you ? — John
– John, Commented Jan 21, 2019 at 13:32

Boussadjra Brahim · Accepted Answer · 2019-01-21 14:05:29Z

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

edited Jan 21, 2019 at 14:05

answered Jan 21, 2019 at 13:38

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Over a year ago

Ok thanks, so it's impossible to use v-model on my component ?

Collectives™ on Stack Overflow

VueJS use v-model on custom component date time picker

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related