I have two date pickers in my form and when I select a start date, the end date should automatically move to that date. Unfortunately I have no idea how to do this

Here are the v-data-pickers:

        <v-row>
                    <v-col cols="12" sm="6" md="4">
                        <v-text-field
                            v-model="form.startDate"
                            label="Start Date"
                            :rules="startDateRules"
                            readonly
                        />

                        <v-date-picker
                            v-model="form.startDate"
                            :allowed-dates="allowedDates"
                            :first-day-of-week="1"
                            label="Start Date"
                        />
                    </v-col>

                    <v-spacer />

                    <v-col cols="12" sm="6" md="4">
                        <v-text-field
                            v-model="form.endDate"
                            label="End Date"
                            :rules="endDateRules"
                            readonly
                        />

                        <v-date-picker
                            v-model="form.endDate"
                            :min="form.startDate"
                            :allowed-dates="allowedDates"
                            :first-day-of-week="1"
                            label="End Date"
                        />
                    </v-col>
                </v-row>

And the data:

    data() {
    return {
        defaultFormData: {
            userId: null,
            startDate: '',
            endDate: ''
        },
        form: {},
    };
},

CodePudding user response：

You can v-bind vuetify API min prop:

min: Minimum allowed date/month (ISO 8601 format)

Docs:

You can specify allowed dates using arrays, objects, and functions.

https://vuetifyjs.com/en/components/date-pickers/#events

<template>
  <v-row justify="center">
    <v-date-picker
      v-model="date"
      :allowed-dates="allowedDates"
      
      min="2016-06-15"
      max="2018-03-20"
    ></v-date-picker>
  </v-row>
</template>

In your case v-bind the second data picker min prop to first data.picker_one value (ISO 8601 format).

:min="picker_one"

Basic Snippet:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      picker_one: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),
      picker_two: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),
    }
  },
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

<div id="app">
  <v-app>
    <v-row justify="center">
      <v-date-picker 
                     v-model="picker_one"
                     >
      </v-date-picker>

      <v-date-picker 
                     :min="picker_one"
                     v-model="picker_two"
                     >
      </v-date-picker>
    </v-row>
    </template>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

UI issue:

To not get unexpected behavior - it is better to show data-picker-2 only after the user select date on data-picker-1.

Related docs:

• vue - v-bind: https://vuejs.org/guide/essentials/class-and-style.html
• vuetify docs - data picker range: https://vuetifyjs.com/en/components/date-pickers/#range

CodePudding user response：

Check this codesandbox I made: https://codesandbox.io/s/stack-72551995-fy3exz?file=/src/components/Example.vue

You can setup a watcher for your object property like this:

watch: {
    'form.startDate': function(val) {
        this.form.endDate = val
    }
}