vuejs-datepicker setting html required attribute on input fields doesn't work as expected and submits the form without have a input value.

<form>
  <datepicker placeholder="Select Date" required></datepicker> 
  <button>Submit</button>
</form>

You can use the above code and test here:

Here is the link to repo and doc:

vuejs-datepicker setting html required attribute on input fields doesn't work as expected and submits the form without have a input value.

<form>
  <datepicker placeholder="Select Date" required></datepicker> 
  <button>Submit</button>
</form>

You can use the above code and test here: https://codesandbox.io/s/p92k8l717

Here is the link to repo and doc: https://github./charliekassel/vuejs-datepicker

• javascript
• html
• vue.js
• vuejs2
• vuejs-datepicker

4 Answers 4

You can use vee-validate library to validate this like:

<date-picker :input-class="{'input': true, 'is-danger': errors.has('date') }"
            v-model="date"
            :disabled="state.disabled"
            placeholder="Select date"
            input-class="form-control"
            ></date-picker>
    <span v-show="errors.has('date')" class="help is-danger-red">{{ errors.first('date') }}</span>
    <input type="hidden" name="date" v-validate="'required'" v-model="date">

You can use this trick to solve this issue, It's works for me.

You can use input-attr to set the required attribute like :input-attr="{required: 'true'}"

I was facing the similar issue, not with this plugin but some other plugin and one get around that worked for me was using vee-validate

This is the best validation plugin available for vue-js.

Hope this helps!

A non-Vue datepicker library flatpickr also has this problem. I managed to resolve it by allowing user input (typeable prop of this library) which removes the readonly attribute which actually prevents the form submission on empty required field and also displays the native browser popup. The side effect is a date can now be directly typed into the input field which then forces you to parse the user input. To make up for that you have to suppress all user input in the field.

See the similar flatpickr question where I posted the plete solution. I used the onReady event of flatpickr which seems to have no equivalent in vuejs-datepicker settings unfortunately.

Flatpickr can be used in Vue thanks to vue-flatpickr-ponent library if you are OK with migrating.