date_format not validating formats with timezones correctly

Versions:

• VueJs: 2.4.4
• Vee-Validate: 2.0.0

Description:

I have a datepicker component that I use in my templates like this:

<datepicker 
       v-model="toDate" 
       v-validate="toDateValidator"
       name="To Date"
       data-vv-name="To date"
       :propClass="this.$validator.errors.has('To Date') ? 'input-validation-error' : ''"
       :propDate="toDate" 
       :includeTime="true" 
       @input="toDate = $event">
</datepicker>

the v-model property is a string that conforms to the default moment format: "YYYY-MM-DDTHH:mm:ssZ" which actually looks like "2017-11-08T19:00:00-08:00"

the v-validate object toDateValidator is defined like this:

get toDateValidator(): any {
       return {required: true, date_format: 'YYYY-MM-DDTHH:mm:ssZ', after: this.fromDate }
 }

When I call this.$validator.validateAll() the date_format validation passes correctly. I can change the date on the datepicker and again the date_format passes validation.

The issue I am faced with is if the utcOffset is changed to something different from what was set initially say "2017-11-09T16:00:00+13:00" the validation of the string will fail.

When the utcOffset is changed I have tried resetting the validator like so:

this.$validator.errors.clear();
this.$validator.reset();
this.$validator.pause();
setTimeout(() => {
      this.$validator.resume();
}, 400);

I can see the aria-invalid attribute equals false, but as soon as I call validateAll() it fails.

Is there something I’m doing wrong here.

[tmacintosh]

Really appreciate the quick response and explanation. I might look into to replacing moment with date-fns but if that looks like too much work I’ll try creating a work around to use a Date object for the validation. However this has certainly helped. Thank you.

Edit: Using the extend method was actually the much easier solution. Thanks again.

[Erichain]

@tmacintosh Hello, I’m facing the similar problem.

I want to wapper the datepicker component and to show the error message when there an error occured:

<!-- MyDatepicker Component -->
<Datepicker
  :value="currentValue"
  :name="name"
  v-validate="validateRule"
/>

<span
  v-show="errors.has(name)"
>
  {{ errorMessage }}
</span>

Used like below:

<!-- Some page -->
<MyDatepicker
  error-message="some error occured!"
  name="myName"
  validate-rule="required:true"
/>

But when I invoke the validateAll method, it cannot trigger the validating, and therefore my error message won’t show.

So, could you please tell me how you solved this problem? Thank you.