尝试将 HTML5 日期输入与日期模型连接答案

【问题标题】：Trying to connect a HTML5 date input with date model尝试将 HTML5 日期输入与日期模型连接
【发布时间】：2018-03-18 10:25:21
【问题描述】：

我有一个这样的 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。我需要以某种方式将其转换为这种格式。

【问题讨论】：

你能展示你已经尝试过或已经尝试过的代码吗？
@SuperDJ 我添加了一个代码示例，其中包含浏览器中呈现的 HTML 的屏幕截图。
虽然这不是您问题的答案，但不需要使用v-bind 或v-on 只需:value 或@input 就足够了
是的，我在文档中读到了 :)。我使用 v-on 和 v-bind 来尝试解决我的问题。但是没有用。你现在清楚问题了吗？如果不让我知道:)

标签： vue.js vuejs2 vue-component

【解决方案1】：

您可以使用过滤器：

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

然后更新您的模板

:value="eventDate.date | dateToString"

【讨论】：

【解决方案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"
/>

【讨论】：