VueJS:如何绑定日期时间? [英] VueJS: How to bind a datetime?

问题描述

我从 WebAPI 收到一个具有此属性的 JSON 对象:

I receive from a WebAPI a JSON object that has this property:

"BirthDate": "2018-02-14T15:24:17.8177428-03:00",

HTML:

<input type="date" v-model="BirthDate" />

我使用 VueJS 绑定该对象，但是VueJS 在控制台中给出此消息:

I bind that object using VueJS, but VueJS give this message in the console:

The specified value "2018-02-14T15:24:17.8177428-03:00" does not conform to the required format, "yyyy-MM-dd".

在这种情况下，唯一相关的部分是 2018-02-14，我可以丢弃其他信息.

On this case the only relevant part is 2018-02-14, I can discard the other information.

我尝试创建一个双向过滤器来将该日期时间转换为所需的格式，但没有成功.参见 VueJS 双向过滤器

I tried to create a Two Way filter to convert that Date Time to the required format but did not have success. See VueJS two way filter

如何将该日期/时间格式转换并绑定到 HTML 日期输入所需的日期格式?

How can I convert and bind that Date/Time format to the required Date Format of the HTML date input ?

推荐答案

考虑到 myDate 是你的财产，你可以使用:

Considering myDate is your property, you can use:

<input type="date" :value="myDate && myDate.toISOString().split('T')[0]"
                   @input="myDate = $event.target.valueAsDate">

由于 v-model 只是:value 和@input 的语法糖，你可以用它们代替.在这种情况下，我们使用并稍微更改了它们(以格式化 String，即日期输入到 Date 对象的输出，反之亦然).

查看下面的演示和注意事项.

Since v-model is only syntactic sugar to :value and @input, you can use them instead. In this case, we used and changed them a little (to format the String that is the output of the date input to a Date object and vice-versa).

这篇关于VueJS:如何绑定日期时间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！