Using vue.js and vee-validate, date validation using after: and a computed field doesn't seem to work

Question

In the codepen below, I have a simple input that contains a date:

<input type="text" 
       v-model="startDate"  
       name="StartDate"
       v-validate="{ required: false, date_format: 'dd/MM/yyyy', before: maxStartDate }"/> 

No matter what valid date I enter, an error is generated:

The StartDate must be before 2019-08-01T03:59:59.999Z.

I've also tried:

• Making maxStartDate return JavaScript date objects, ISO dates (seen here), and simple dates like '1/1/2019'.
• Various combinations of validation rules. No date_format, no required, etc.
• I have been on this one for hours. Feels like I'm missing something obvious and will soon kick myself.

I also noticed that vee-validate is using UK-style locales in its messaging. For instance, I'm in the US but dates come back like 25/07/2019. I wonder if date comparisons are somehow being skewed.

Codepen: https://codepen.io/Kinetiq/pen/XLeEaM

Answer 1

The before validator does not work how you think it does. What it wants is a reference to another field that contains a date - imagine if you were making a startDate and endDate field, you'd want to make sure that startDate is before endDate. That's what this does.

The validator you should be using is date_between , like so:

<input type="text" 
       v-model="startDate"
       name="StartDate"
       v-validate="{ date_format: 'dd/MM/yyyy', date_between:['01/01/1990',maxStartDate] }"/>  

And I had to modify how maxStartDate is defined like this:

            maxStartDate: function() {
                return moment()
                    .startOf('month')
                    .add(1, 'months')
                    .endOf('month').format('DD/MM/YYYY');
            }

Working example: https://codepen.io/anon/pen/NZaLzg