Vue 制定日期选择器验证

问题描述

我一直在使用 Vue Formulate 库（这很棒）。

我需要用户只能选择从今天（包括）开始的日期。

我使用“after”默认值进行验证，但今天（当前日期）无效。换句话说，选择今天的日期时验证开始，并且表单无法提交。

解决这个问题的最佳方法是什么？

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

解决方法

通过在今天之前给 after 属性一个 Date 值来解决一个小问题：

<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

编辑：事实上，您也可以通过返回今天之前的日期来使用计算属性来实现。

,

验证后应由日期定义。这是通过计算属性计算今天的解决方案。 this

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