I’m using Yup to do some form validation in a Svelte application, and I keep running into a bug when trying to compare two dates. The following code defines my form schema:

const initialValues = {
        start_date: new Date(),
        end_date: new Date(),
    }

yup.object({
        start_date: yup
            .date()
            .required()
            .min(new Date(), 'Start Date must be in the future'),
        end_date: yup
            .date()
            .required()
            .min(yup.ref('start_date'), 'End Date must be later than Start Date'),
    })

The values in this schema are controlled by a pair of date picker components

        <div class="flex flex-row gap-6">
            <DatePicker
                blur={() => validateField('start_date')}
                name="start_date"
                label="Start Date*"
                bind:value={$form.start_date}
                error={$errors.start_date}
                required
            />
            <DatePicker
                blur={() => validateField('end_date')}
                name="end_date"
                label="End Date*"
                bind:value={$form.end_date}
                error={$errors.end_date}
                required
            />
        </div>

I can update both start_date and end_date from my date picker components, but when I try to access the value of start_date via yup.ref, it returns a string, rather than a date object, causing the validation to fail every time. Strangely enough, the value of end_date is represented as a date object during this comparison.

I’ve seen multiple Yup examples that say to use this method for date comparison, but I’ve been unable get this to work. I can even compel the values of both fields to date objects by using yup.transform() and it still tries to compare them as if one is a string and the other a date.

Does anyone know what might be going wrong here?