CODEWITHSUNDEEP
vue.jsvalidationvue-formulate
nicCTI
nicCTI

Reputation: 3

Vue Formulate Date Picker Validation

I've been using the Vue Formulate library (which is awesome).

I need the user to only be able to pick a date from today (included) onwards.

I am using the "after" default for validation, but today (the current date) is not valid. In other words the validation kicks in when choosing todays date, and the form cannot be submitted.

What is the best way to get around this?

https://codesandbox.io/s/vue-formulate-reproduction-template-forked-kmpgq?fontsize=14&hidenavigation=1&theme=dark

Upvotes: 0

Views: 1032

Answers (2)

TheMo
TheMo

Reputation: 119

A little workaround by giving the after attribute a Date value before today:

<template>
  <FormulateInput
    name="date"
    label="Date:"
    :validation="
      'bail|required|after:' + new Date(Date.now() - 24 * 60 * 60 * 1000)
    "
    :validation-messages="{ after: 'The date has to be today or later' }"
    type="date"
  />
</template>

https://codesandbox.io/s/vue-formulate-reproduction-template-forked-ky1hu?fontsize=14&hidenavigation=1&theme=dark

EDIT: In fact you can do it also with a computed property by returning the date before today.

Upvotes: 1

tuhin47
tuhin47

Reputation: 6058

After validation should defined by a Date. Here is the solution by calculating today by a computed property. Codesandbox

<template>
  <FormulateInput
    name="date"
    label="Date:"
    :validation="'bail|required|after:' + today"
    :validation-messages="{ after: 'The date has to be today or later' }"
    type="date"
  />
</template>

<script>
export default {
  computed: {
    today() {
      return new Date().toLocaleDateString();
    },
  },
};
</script>

Upvotes: 0

Related Questions