VueJS 将输入绑定到日期值答案

【问题标题】：VueJS bind input to Date valueVueJS 将输入绑定到日期值
【发布时间】：2019-09-17 09:09:05
【问题描述】：

我有 data 和 Date 字段 startDate 和 stopDate：

    data: {
        error: '',
        config: {rate: 0.00, surcharge: 0.00, startDate: new Date(), stopDate: null, enabled: true},
        configurations: []
    },

我也有输入字段：

<input id="startDate" type="date" v-model="config.startDate">

所以在创建页面时，我在控制台中看到警告：

vue.js:7629 指定值“Tue Sep 17 2019 15:52:44 GMT+0700 (\u041A\u0440\u0430\u0441\u043D\u043E\u044F\u0440\u0441\u043A, \u0441\u0442\u0430\u043D\u0434\u0430\u0440\u0442\u043D\u043E\u0435 \u0432\u0440\u0435\u043C\u044F)" 不符合要求格式，“yyyy-MM-dd”。

此外，在页面加载后，输入字段没有日期值。似乎初始 Date 值未绑定到输入字段。

将日期值绑定到输入字段的自然方式是什么？感谢您的回答和问候。

【问题讨论】：

尝试将输入类型更改为“文本”而不是日期。
@VedprakashSingh 但是，如果我想拥有带有内置日历支持的输入字段（type="date"）怎么办？

标签： vuejs2

【解决方案1】：

这是一个有效的 jsfiddle。我在 console.log 中没有收到任何错误

HTML

<div id="date">
 <p>
   New Date: <input id="startDate" type="date" v- 
   model="config.startDate">
   <span>{{config.startDate}}</span>
 </p>
</div>

JS

var box = new Vue({
    el:'#date',
    data:{
    config: {rate: 0.00, surcharge: 0.00, startDate: new Date(), 
    stopDate: null, enabled: true}}
});

https://jsfiddle.net/o6d1x9eb/

【讨论】：

首先，我在开发模式下使用 VueJS 2.6.10 作为下载的.js 文件。也许开发模式会发出更多的信息。其次，在小提琴中，输入字段中没有当前日期的值。好像也行不通。消息不是问题。真正的问题是空输入字段而不是当前日期值。

【解决方案2】：

根据 VueJS 文档，v-model="config.startDate" 等于 v-bind:value="config.startDate" v-on:input="config.startDate = $event.target.value"。所以，我有两种方法：

将data 值的config 变量存储为String 而不是Date，并通过输入字段对其进行编辑。顺便说一下，输入字段以yyyy-mm-dd格式返回日期的字符串值。
使用值作为Date，过滤器（或函数）将Date转换为String，并使用函数将String转换为Date。

所以，我使用的方式是对于输入字段：

<input id="startDate" type="date" 
v-bind:value="config.startDate | inputDateFilter" 
v-on:input="config.startDate = getDate($event.target.value)">

对于 Vue 实例：

    filters: {
        inputDateFilter: function (date) {
            if (!date) {
                return '';
            }
            date = new Date(date);
            return date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).slice(-2) + '-' + ('0' + date.getDate()).slice(-2);
        },

        // . . .

    methods: {
        getDate(value) {
            if (!value) {
                return null;
            }
            return new Date(value);
        },

        // . . .

这就是我想要的。

【讨论】：