Trying to connect a HTML5 date input with date model

Question

I have an HTML5 date input element like this: <input type="date" />

if you choose a date in this input a string will be the value, for example: "2018-12-31"

In my model I want the date to be presented as the following string: "2018-12-31T00:00:00.000Z" and not the simplified string.

How do I make sure that the date in my model keeps the correct format? I tried using a computed but since I am in a loop this time I cannot use them.

{{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>

As you can see here the eventDate.date is a long string but the input needs the format YYYY-MM-DD. I need to convert it to and from this format some way.

Answer 1

You could use a filter:

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

and then update your template

:value="eventDate.date | dateToString"