CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Tom Franssen
Tom Franssen

Reputation: 456

Trying to connect a HTML5 date input with date model

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. enter image description here

Upvotes: 0

Views: 1250

Answers (2)

connexo
connexo

Reputation: 56720

You could use a filter:

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

and then update your template

:value="eventDate.date | dateToString"

Upvotes: 1

Tom Franssen
Tom Franssen

Reputation: 456

This is what I ended up using:

<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"
/>

Upvotes: 0

Related Questions