Can I enforce a date within a range in a vuetify.js v-text-field for a date

Question

I have the text field below with a date in it, the user should be able to enter in by hand. With the enforced format MM/DD/YYYY

Question - is there a way to enforce the date within a specific range. So maybe use the datepicker validation rules!

ex. The datepicker won't let you select any year before 1919.

Can there be a way to clear the field if the range falls outside the datepicker? ex. 01/01/0110 or 21/21/1000

<v-menu ref="startDateMenu"
                        :close-on-content-click="false"
                        v-model="startDateMenu"
                        :nudge-right="40"
                        lazy
                        transition="scale-transition"
                        offset-y
                        full-width
                        :disabled="!editMode"
                        max-width="290px"
                        min-width="290px">
                    <v-text-field slot="activator"
                                  v-model="startDateFormatted"
                                  label="Start Date"
                                  prepend-icon="event"
                                  @blur="startDate = parseDate(startDateFormatted)"
                                  return-masked-value
                                  mask="##/##/####"
                                  dont-fill-mask-blanks
                                  
                                  placeholder="MM/DD/YYYY"
                                  :disabled="!editMode">
                    </v-text-field>
                    <v-date-picker v-model="startDate"
                                   ref="startDatePicker"
                                   :max="getToday()"
                                   no-title
                                   @input="inputStartDate"
                                   :readonly="!editMode">
                    </v-date-picker>
                </v-menu>

Answer 1

You can use Vee-Validate to validate dates (or write your own rules).

Check out their documentation simple date format and date ranges:

For a simple date validation:

<input v-validate="'date_format:dd/MM/yyyy'" name="date_format_field" type="text">

Date range validation:

<input v-validate="'date_format:dd/MM/yyyy|date_between:10/09/2016,20/09/2016'" name="date_between_field" type="text">

Vue.use(VeeValidate);

new Vue({
  el: '#app',
  template: `
    <div>
      <h1>Simple date validation</h1>
      <input v-validate="'date_format:dd/MM/yyyy'" name="date" type="text" v-model="dateField">
      <span class="error">{{ errors.first('date') }}</span>
      <h1>Date Range Validation</h1>
      <input v-validate="'date_format:dd/MM/yyyy|date_between:10/09/2016,20/09/2016'" name="dateRange" v-model="dateRange" type="text">
      <span class="error">{{ errors.first('dateRange') }}</span>
    </div>
  `,
  data: () => ({ dateField: undefined, dateRange: undefined })
});

.error {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>

<div id="app"></div>

Answer 2

Simply set min/max props on v-text-field in the format YYYY-MM-DD, e.g.

<v-text-field
    label="Start date"
    v-model="startDate"
    type="date"
    min="2022-04-10"
></v-text-field>

This seems to be an undocumented feature of v-text-field. See v-date-picker for further details on these props.