Datepicker doesn't get validated on input

Question

I'm currently using the datepicker component in one of my projects. The component is supposed to throw an error message if I click in and out of the empty textfield of the datepicker menu. So far the error message only works if I enter a value and then remove it again.

There are already rules which check if the date-value of the textfield is longer than 0 Digits or not null.

HTML

<div id="app">
  <v-app id="inspire">
    <v-container grid-list-md>
      <v-form v-model='validForm'>
        <v-layout row wrap>
          <v-flex xs12 lg6>
            <v-text-field
              v-model="text"
              clearable
              label="Regular Textfield"
              :rules="rulesDatefield"            
              v-on="on"
             ></v-text-field>

            <v-menu
              v-model="menu1"
              :close-on-content-click="false"
              full-width
              max-width="290"
            >
              <template v-slot:activator="{ on }">
                <v-text-field
                  v-model='date'            
                  clearable
                  label="Datefield"
                  readonly
                  :rules="rulesDatefield"            
                  v-on="on"
                ></v-text-field>
              </template>
              <v-date-picker
                v-model="date"
                @change="menu1 = false"
              ></v-date-picker>
            </v-menu>
          </v-flex>
        </v-layout>
      </v-form>  
      <v-btn :disabled="!validForm" @click='printValues()' color='primary'>Create</v-btn>
    </v-container>
  </v-app>
</div>

JS

new Vue({
  el: '#app',
  data: () => ({
    validForm: false,
    text: '',
    date: '',
    menu1: false,
    rulesDatefield: [
      v => String(v).length > 0 || 'Field is empty!',
      v => v !== null || 'Field is empty!'
    ]
  }),
  methods: {
    printValues: function() {
      window.alert('Entered Text: ' + this.text + '\nEntered Date:' + this.date)
    }
  }
})

Codepen: https://codepen.io/anon/pen/XLLNZM?&editable=true&editors=101

I expect an error message from the date-textfield like in the regular textfield above if I enter and exit the datepicker without selecting a date.

Answer 1

<v-text-field
  v-model="date"            
  clearable
  readonly
  label="Datefield"
  :rules="rulesDatefield"            
  v-on="on"
  @blur="date = date || null"
></v-text-field>

Seems strange but works, as you intended.