vue.js - Vue 制定日期选择器验证

Question

我一直在使用 Vue Formulate 库（太棒了）。

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

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

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

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

Answer 1

通过在今天之前给 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

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

Answer 2

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

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