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.

@SuperDJ I added a code example with screenshot of the rendered HTML in the browser. — Tom Franssen
– Tom Franssen, Commented Mar 18, 2018 at 19:10
Altough this isn't an answer to your question but it's not required to use v-bind or v-on just :value or @input is enough — SuperDJ
– SuperDJ, Commented Mar 18, 2018 at 19:17
Yeah I read about that in the docs :). I used the v-on and v-bind to try to work out my problem. But didn't work. Is the problem now clear to you? If not let me know :) — Tom Franssen
– Tom Franssen, Commented Mar 18, 2018 at 19:22

connexo · Accepted Answer · 2024-02-27 21:01:23Z

1

You could use a filter:

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

and then update your template

:value="eventDate.date | dateToString"

edited Feb 27, 2024 at 21:01

answered Mar 18, 2018 at 19:21

connexo

57.2k15 gold badges112 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ignacy130 Over a year ago

It's filters in vue.js 2: v2.vuejs.org/v2/guide/filters

Tom Franssen · Accepted Answer · 2018-03-18 19:34:22Z

0

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

answered Mar 18, 2018 at 19:34

Tom Franssen

4564 silver badges12 bronze badges

Collectives™ on Stack Overflow

Trying to connect a HTML5 date input with date model

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related