vue.jsvalidationvue-formulate

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


Solution

  • 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>