Vuetify: DatePickerComponent

General

• Swap <DatePickerComponent> for <HgDatePickerComponent>.
• Swap :value and @update:value props for v-model.
• The behaviour of validation has changed and been expanded.
  • The component internally validates that dates entered via the text field are valid (having the correct format and corresponding to a real date). The model will see invalid dates as empty dates, but if you want to determine if an invalid date has been entered (e.g. to prevent form submission when the date has not deliberately been cleared), you can handle the validity-updated event and store the value. This is a replacement for the is-date-valid event.
  • All other validations (required, minValue, maxValue) should be handled by the parent component.
    • To trigger these validations, the blur event should be handled and $touch() should be called.
    • Information associated with the validations can be passed to <HgDatePickerComponent> via the state and error-messages props. This will allow the component to display a red outline and error message for validations from the parent.
    • <HgDatePickerComponent> has props for min-date and max-date which limit the options available in the picker. These should be used in conjunction with minValue and maxValue validations on the parent.

Example

const dateOfBirthIsValid = ref(false);
const validations = computed(() => ({
    dependent: {
        dateOfBirth: {
            required,
            minValue: helpers.withMessage(
                `Date must not be before ${minBirthdate.value.format()}`,
                (value: string) =>
                    !value ||
                    DateWrapper.fromStringFormat(value).isAfter(
                        minBirthdate.value
                    )
            ),
            maxValue: helpers.withMessage(
                `Date must not be after ${maxBirthdate.format()}`,
                (value: string) =>
                    !value ||
                    DateWrapper.fromStringFormat(value).isBefore(maxBirthdate)
            ),
        },
    },
}));

const v$ = useVuelidate(validations, { dependent });

<HgDatePickerComponent
    id="dateOfBirth"
    v-model="dependent.dateOfBirth"
    data-testid="dateOfBirthInput"
    :state="ValidationUtil.isValid(v$.dependent.dateOfBirth)"
    :error-messages="
        ValidationUtil.getErrorMessages(v$.dependent.dateOfBirth)
    "
    :min-date="minBirthdate"
    :max-date="maxBirthdate"
    @blur="v$.value.dependent.dateOfBirth.$touch()"
    @validity-updated="dateOfBirthIsValid = $event"
/>