How can I implement dynamic Vuetify validation rules with dependent date models in Vue.js?

Below is one way to tackle the problem. Instead of putting all the logic in the UI (via v-date-picker restrictions) or relying on one simple "required" rule, you can create a reusable validation function that accepts additional parameters such as a dependent model. One common approach is to write a factory function that returns a rule function using a dependent reference and a custom comparison.

For example, assume you have two date models: startDate and endDate. You can create a helper like this:

JAVASCRIPTCopied
// A factory function for date-range validation rules
function createDateRangeValidator(dependentDate, comparisonFn, errorMessage) {
  return (date) => {
    if (!date) return 'Required.';
    // If the dependent date is not set, we skip the comparison.
    if (!dependentDate.value) return true;
    return comparisonFn(date, dependentDate.value) ? true : errorMessage;
  }
}

Then in your component setup, you might do something like:

VUECopied
<script setup>
import { ref } from 'vue'

const startDate = ref(null)
const endDate = ref(null)

// Rule for the start date: it must be set and must be less than or equal to endDate.
const startDateRules = [
  (date) => !!date || 'Start date is required.',
  createDateRangeValidator(endDate, (start, end) => start <= end, 'Start date must be before or equal to End Date')
]

// Rule for the end date: it must be set and must be greater than or equal to startDate.
const endDateRules = [
  (date) => !!date || 'End date is required.',
  createDateRangeValidator(startDate, (end, start) => end >= start, 'End date must be after or equal to Start Date')
]
</script>

Then use these rules on your v-text-field components:

VUECopied
<template>
  <v-row>
    <v-col>
      <v-menu v-model="startDateMenu"
              :close-on-content-click="false"
              transition="scale-transition"
              offset-y
              max-width="290px"
              min-width="auto">
        <template v-slot:activator="{ props }">
          <v-text-field
            v-bind="props"
            label="Rating Period Begin Date"
            :model-value="startDate"
            prepend-inner-icon="mdi-calendar"
            :rules="startDateRules"
            readonly
            variant="outlined"/>
        </template>
        <v-date-picker
          v-model="startDate"
          :max="endDate"
          no-title
          @update:modelValue="startDateMenu = false"/>
      </v-menu>
    </v-col>

    <v-col>
      <v-menu v-model="endDateMenu"
              :close-on-content-click="false"
              transition="scale-transition"
              offset-y
              max-width="290px"
              min-width="auto">
        <template v-slot:activator="{ props }">
          <v-text-field
            v-bind="props"
            label="Rating Period End Date"
            :model-value="endDate"
            prepend-inner-icon="mdi-calendar"
            :rules="endDateRules"
            readonly
            variant="outlined"/>
        </template>
        <v-date-picker
          v-model="endDate"
          :min="startDate"
          no-title
          @update:modelValue="endDateMenu = false"/>
      </v-menu>
    </v-col>
  </v-row>
</template>

<script setup>
import { ref } from 'vue'

const startDate = ref(null)
const endDate = ref(null)

const startDateMenu = ref(false)
const endDateMenu = ref(false)

// Universal validation helper
function createDateRangeValidator(dependentDate, comparisonFn, errorMessage) {
  return (date) => {
    if (!date) return 'Required.'
    if (!dependentDate.value) return true
    return comparisonFn(date, dependentDate.value) ? true : errorMessage
  }
}

const startDateRules = [
  (date) => !!date || 'Start date is required.',
  createDateRangeValidator(endDate, (start, end) => start <= end, 'Start date must be before or equal to End Date')
]

const endDateRules = [
  (date) => !!date || 'End date is required.',
  createDateRangeValidator(startDate, (end, start) => end >= start, 'End date must be after or equal to Start Date')
]
</script>

Explanation

1. Validation Logic:
   The createDateRangeValidator function takes three parameters:

   • A dependent date reference (e.g., for start date we pass endDate).
   • A comparison function to check the relationship between the current date and the dependent date.
   • An error message to return when the validation fails.

2. Reusability:
   This approach allows you to create dynamic rules that depend on other model values. The same helper can be used for various date range scenarios throughout your app.

3. UI vs. Data Consistency:
   While the v-date-picker’s min and max props restrict what the user can select, the validation rules ensure that even when the values are set programmatically or auto filled from another route, the data integrity is maintained.

This modular approach makes it easy to expand and maintain validation for different parts of your application while ensuring that both user input and programmatically set data are properly validated.