将 null 设置为默认值时 DatePicker Vuetify 错误

Question

我有需要日期选择器但不是必需的表单，我想将日期选择器中的默认值设置为 null 并且也希望可以清除，但是当值为空时，日期不显示在日期选择器上并显示错误 RangeError: Invalid time value

这里是代码：

<v-menu
  ref="menu"
  v-model="menuEnd"
  :close-on-content-click="false"
  transition="scale-transition"
  offset-y
  min-width="290px"
>
  <template v-slot:activator="{ on }">
    <v-text-field
      :value="detail.endDate"
      label="End Date"
      prepend-icon="mdi-calendar"
      readonly
      v-on="on"
      color="primary"
      clearable
    ></v-text-field>
  </template>
  <v-date-picker
    v-model="detail.endDate"
    @change="onEndDateChange"
    no-title
    scrollable
    show-current="false"
  ></v-date-picker>
</v-menu>

数据

data() {
  return {
    menuEnd: false,
    detail: {dateEnd: null},
  }
},
methods: {
  onEndDateChange() {
    this.menuEnd = false
  }
}

结果来了

通常我使用默认值 moment().format('YYYY-MM-DD')

我还在研究这个，也许有人可以帮助我。

更新

在Vuetify Doc，默认值为null，显示日期，但在我的例子中，没有显示日期

Answer 1

同样根据Vuetify docs, v-date-picker accepts ISO 8601 date string, which have the format you've mentioned ('YYYY-MM-DD'), as you can check on the ISO 8601 page。

所以 null 值可能确实是这里的问题。检查他们的 API docs for v-date-picker，默认值是 undefined，所以如果你把你的 null 改成 undefined 就可以了。

另一种选择，我在编写此类日期选择时使用过很多次，是将 today 的值用作默认值，以便用户轻松定位自己，甚至允许以今天为目标时，无需选择即可通过表格。

此实现可能来自：

使用计算值（我建议这样做），如果初始值为 null，它将以 today 开头，然后使用 computed setter.
在你的数据变量中使用一些默认值

无论如何，提供默认值仍然是我向您推荐的。

Answer 2

问题是您将“字符串”值绑定到 show-current 属性而不是布尔值。你忘记了 vue 绑定 : 或 v-bind.

<v-date-picker
    v-model="detail.endDate"
    @change="onEndDateChange"
    no-title
    scrollable
    :show-current="false" <!-- HERE -->
></v-date-picker>

查看工作代码笔：https://codepen.io/Kapcash/pen/LYyNLyg?editors=1011

将 null 设置为默认值时 DatePicker Vuetify 错误

DatePicker Vuetify error when set null as default value

vue.js

vuetify.js

更新