Vuetify - Rules should return a string or boolean, received 'undefined' instead

Question

I have a form with datepicker, the validation is working as intended but I keep getting an error message in the browser's console, "Rules should return a string or boolean, received 'undefined' instead" I just want to get rid of it, but I'm not sure where and at what moment the rule it is returning undefined.

Also the "future" rule is always returning false for some reason

<template>
<div>
    <v-container>
        <v-card>
            <div class="container">
                <v-form ref="form" v-model="isValid">
                    <v-row>
                        <v-col cols="12" sm="12" md="6">
                            <v-menu ref="menu" v-model="menu" :close-on-content-click="false" :return-value.sync="date" transition="scale-transition" offset-y min-width="290px">
                                <template v-slot:activator="{ on }">
                                    <v-text-field v-model="route.departure" label="Departure" color="black" readonly v-on="on" :rules="[rules.required, rules.future]"></v-text-field>
                                </template>
                                <v-date-picker v-model="route.departure" no-title scrollable color="amber lighten-2">
                                    <v-spacer></v-spacer>
                                    <v-btn color="red accent-3" class="black-text" @click="menu = false">Cancel</v-btn>
                                    <v-btn color="yellow" class="black-text" @click="$refs.menu.save(date)">OK</v-btn>
                                </v-date-picker>
                            </v-menu>
                        </v-col>

                        <v-col cols="12" sm="12" md="6">
                            <v-menu ref="menu_2" v-model="menu_2" :close-on-content-click="false" :return-value.sync="date" transition="scale-transition" offset-y min-width="290px">
                                <template v-slot:activator="{ on }">
                                    <v-text-field v-model="route.arrival" label="Arrival" color="black" :rules="[rules.required, rules.today, rules.future]" readonly v-on="on"></v-text-field>
                                </template>
                                <v-date-picker v-model="route.arrival" no-title scrollable color="amber lighten-2">
                                    <v-spacer></v-spacer>
                                    <v-btn color="red accent-3" class="black-text" @click="menu_2 = false">Cancel</v-btn>
                                    <v-btn color="yellow" class="black-text" @click="$refs.menu_2.save(date)">OK</v-btn>
                                </v-date-picker>
                            </v-menu>
                        </v-col>
                    </v-row>
                </v-form>
            </div>

        </v-card>
    </v-container>
</div>
</template>

<script>
export default {
    data() {
        return {
            isValid: true,
            date: new Date().toISOString().substr(0, 10),
            menu: false,
            menu_2: false,
            route: {
                departure: '',
                arrival: '',
            },



            rules: {
                required: value => !!value || 'Required.',
                arrival: value => {
                    return (new Date(this.route.departure) < new Date(this.route.arrival) || 'Arrival date must be after the Departure date');
                },
                future: value => {
                    return (new Date() <= new Date(this.route.departure) && (new Date() <= new Date(this.route.arrival))) || "Date must be today's date or after"
                }

            }
        }
    },




}
</script>

Answer 1

The issue comes from :rules="[rules.required, rules.today, rules.future]" since today rule is undefined and modify future and arrival by adding the value as parameter of the date constructor :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      isValid: true,
      date: new Date().toISOString().substr(0, 10),
      menu: false,
      menu_2: false,
      route: {
        departure: new Date().toISOString().substr(0, 10),
        arrival: new Date().toISOString().substr(0, 10),
      },



      rules: {
        required: value => !!value || 'Required.',
        arrival: value => {
          return (new Date(value) < new Date(this.route.arrival) || 'Arrival date must be after the Departure date');
        },
        future: value => {
          return  (new Date() <= new Date(this.route.departure) && (new Date() <= new Date(value))) || "Date must be today's date or after"
        }

      }
    }
  },



})

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<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>

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-card>
          <div class="container">
            <v-form ref="form" v-model="isValid">
              <v-row>
                <v-col cols="12" sm="12" md="6">
                  <v-menu ref="menu" v-model="menu" :close-on-content-click="false" :return-value.sync="date" transition="scale-transition" offset-y min-width="290px">
                    <template v-slot:activator="{ on }">
                                    <v-text-field v-model="route.departure" label="Departure" color="black" readonly v-on="on" :rules="[rules.required, rules.future]"></v-text-field>
                                </template>
                    <v-date-picker v-model="route.departure" no-title scrollable color="amber lighten-2">
                      <v-spacer></v-spacer>
                      <v-btn color="red accent-3" class="black-text" @click="menu = false">Cancel</v-btn>
                      <v-btn color="yellow" class="black-text" @click="$refs.menu.save(date)">OK</v-btn>
                    </v-date-picker>
                  </v-menu>
                </v-col>

                <v-col cols="12" sm="12" md="6">
                  <v-menu ref="menu_2" v-model="menu_2" :close-on-content-click="false" :return-value.sync="date" transition="scale-transition" offset-y min-width="290px">
                    <template v-slot:activator="{ on }">
                                    <v-text-field v-model="route.arrival" label="Arrival" color="black" :rules="[rules.required, rules.future]" readonly v-on="on"></v-text-field>
                                </template>
                    <v-date-picker v-model="route.arrival" no-title scrollable color="amber lighten-2">
                      <v-spacer></v-spacer>
                      <v-btn color="red accent-3" class="black-text" @click="menu_2 = false">Cancel</v-btn>
                      <v-btn color="yellow" class="black-text" @click="$refs.menu_2.save(date)">OK</v-btn>
                    </v-date-picker>
                  </v-menu>
                </v-col>
              </v-row>
            </v-form>
          </div>

        </v-card>
      </v-container>
    </v-content>
  </v-app>
</div>