时间戳

首页 > 解决方案 > 将 null 设置为默认值时 DatePicker Vuetify 错误

vue.js - 将 null 设置为默认值时 DatePicker Vuetify 错误

问题描述

我有需要 datepicker 但不是必需的表单，我想将 datepicker 中的默认值设置为 null 并且也希望可以清除，但是当值为 null 时，日期不会显示在 datepicker 上并显示错误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，显示日期，但在我的情况下，没有显示日期

标签： vue.jsvuetify.js

解决方案

根据Vuetify docs，v-date-picker接受 ISO 8601 日期字符串，它具有您提到的格式（'YYYY-MM-DD'），您也可以在ISO 8601 页面上查看。

所以一个null值可能确实是这里的问题。检查他们的API 文档v-date-picker，默认值为undefined，所以如果你null用 an 改变你的undefined应该会成功。

另一种选择，我在编写这种日期选择时使用过很多次，将 的值用作默认值today，使用户可以轻松定位自​​己，甚至允许在瞄准时通过表单而不选择今天。

这个实现可能来自于：

  1. 使用计算值（我建议这样做），today如果初始值为 null，然后使用计算的 setter更新自身。
  2. 在您的数据变量中使用一些默认值

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

推荐阅读