In Vue, how do I bind a date object to a date input ? (v-model doesn't work)

Question

// This doesn't work
<input type='date' v-model='store.myDateObject'>

How can I bind a date input to a date object in my store?

bbsimonbb · Answer 1 · 2019-05-01T11:45:24.070

5

Assuming you want your dates as midnight UTC date objects, do this...

<input type='date'
    :value='store.myDate.toJSON().substring(0,10)'
    @input='store.myDate = new Date($event.target.value)'
>

edited May 01 '19 at 11:45

answered Oct 20 '17 at 08:49

bbsimonbb

I had to use $event instead of $event.target.value in @input with Vue 2.6.10, Chrome 73.0.3683.103, and Edge 42.17134.1.0. I'm not sure if a change in Vue itself or in the browsers caused this, but I can't say I'm confident this will work in every browser. – Nate Bundy May 03 '19 at 17:35

1 Answers1