vuejs-datepicker with required attribute gets submitted without value

Question

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.com/charliekassel/vuejs-datepicker

Answer 1

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.

Answer 2

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