具有必需属性的 Vuejs-Datepicker 在没有值的情况下提交

Question

vuejs-datepicker 在输入字段上设置 HTML 必需属性无法按预期工作，并且在没有输入值的情况下提交表单。

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

您可以使用上面的代码并在此处进行测试：https://codesandbox.io/s/p92k8l717

这是存储库和文档的链接：https://github.com/charliekassel/vuejs-datepicker

Answer 1

您可以使用 vee-validate 库来验证这一点，如下所示：

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

您可以使用此技巧来解决此问题，它对我有用。

Answer 2

您可以使用input-attr来设置所需的属性，例如:input-attr="{required: 'true'}"

Answer 3

我面临着类似的问题，不是这个插件，而是其他一些插件，一个对我有用的解决方法是使用 vee-validate

这是可用于 vue-js 的最佳验证插件。

希望这有帮助！

Answer 4

一个非 Vue 日期选择器库 flatpickr 也有这个问题。我设法通过允许用户输入(typeable这个库的 prop(来解决它，该输入删除了 readonly 属性，该属性实际上阻止了在空必填字段上提交表单并显示本机浏览器弹出窗口。副作用是现在可以直接在输入字段中键入日期，然后强制您解析用户输入。为了弥补这一点，您必须禁止字段中的所有用户输入。

请参阅类似的平挑器问题，我在其中发布了完整的解决方案。不幸的是，我使用了 flatpickr 的 onReady 事件，该事件在 vuejs-datepicker 设置中似乎没有等效项。

Flatpickr 可以在 Vue 中使用，这要归功于 vue-flatpickr-component 库，如果你可以迁移的话。