VueJS bind input to Date value - vuejs2

Question

I have data with Date fields startDate and stopDate:
data: {
error: '',
config: {rate: 0.00, surcharge: 0.00, startDate: new Date(), stopDate: null, enabled: true},
configurations: []
},
Also I have input field:
<input id="startDate" type="date" v-model="config.startDate">
So while page creation I see warning in console:
vue.js:7629 The specified value "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)" does not conform to the required
format, "yyyy-MM-dd".
Also, input field has no date value just after page has loaded. Seems like initial Date value has not bound to input field.
What is the natural way to bind date value to input field?
thanks for your answers and best regards.

Answer 1

This is a working jsfiddle. I don't receive any error in 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/

Answer 2

According VueJS documentation, v-model="config.startDate" is equals to v-bind:value="config.startDate" v-on:input="config.startDate = $event.target.value".
So, I have two ways:
Store in config variable of data value as String instead of Date and edit it by the input field. By the way, input field returns string value of date in yyyy-mm-dd format.
Use value as Date, filter (or function) to convert Date into String and function to convert String into Date.
So, the way I used is
for inpuut field:
<input id="startDate" type="date"
v-bind:value="config.startDate | inputDateFilter"
v-on:input="config.startDate = getDate($event.target.value)">
and for Vue instance:
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);
},
// . . .
This is does what I want.