尝试将 HTML5 日期输入与日期模型连接起来

Question

我有一个像这样的 HTML5 日期输入元素：

<input type="date" />

如果您在此输入中选择日期，则该值将是一个字符串，例如：

"2018-12-31"

在我的模型中，我希望日期显示为以下字符串：

"2018-12-31T00:00:00.000Z"

而不是简化的字符串。

如何确保模型中的日期保持正确的格式？我尝试使用计算的，但由于这次我处于循环中，所以我无法使用它们。

{{eventDate.date}}
<b-form-input
    v-bind:value="eventDate.date"
    v-on:input="eventDate.date = $event.target.value"
    v-bind:id="'event-day-date-' + index"
    size="sm"
    type="date"
    placeholder="2018-12-31"
>
</b-form-input>

正如您在此处看到的 eventDate.date 是一个长字符串，但输入需要格式 YYYY-MM-DD。我需要以某种方式将其与这种格式相互转换。

Answer 1

您可以使用过滤器：

filters: {
  dateToString(date) {
    return date.toString().substr(0,10)
  }
}

然后更新您的模板

:value="eventDate.date | dateToString"

Answer 2

这就是我最终使用的：

<input
    v-validate="'required'"
    v-bind:name="'eventdate-' + index"
    v-bind:value="eventDate.date | dateToString"
    v-on:input="eventDate.date = $event.target.value + 'T00:00:00.000Z'"
    v-bind:id="'event-day-date-' + index"
    class="form-control form-control-sm"
    type="date"
    placeholder="2018-12-31"
/>