我可以在 vuetify.js v-text-field 的某个范围内强制执行日期吗

Question

我在下面的文本字段中有一个日期，用户应该可以手动输入。使用强制格式 MM/DD/YYYY

问题 - 有没有办法在特定范围内强制执行日期。所以也许可以使用 datepicker 验证规则！

例如。日期选择器不会让您选择 1919 年之前的任何年份。

如果范围超出日期选择器，是否有办法清除该字段？ 前任。 01/01/0110 或 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

您可以使用Vee-Validate 来验证日期（或编写您自己的规则）。

查看他们的文档 simple date format 和 date ranges：

对于简单的日期验证：

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

日期范围验证：

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