V-model with html input type=date

Is there anything special that needs to be done to get v-model to work with input type=date? All my other controls are binding but these.The date does not display in the control. If I change type=text it works.

Hi. Have you any solution?

The element <input type="data" /> expects (at least for my US configuration) the value to be YYYY-MM-DD. That is:

data: {
    mydate: '2017-07-04'
}

<input type="date" v-model="mydate" />

works. See https://jsfiddle.net/jnash21/mzx7n1sq/

3 Likes

Can’t I work with Date type?

Do you mean that you’d like to do something like

var vueData = {};
vueData.mydate = new Date();

var vm = new Vue({
  data: {
      formData: vueData;  
  }
});

<input type="date" v-model="formData.mydate" />

I’ve updated the fiddle at https://jsfiddle.net/jnash21/mzx7n1sq/1/ but the behavior is quite a bit different between Chrome and Firefox.

Either way, using a Date type bound to an input box is problematic because the input control’s native value property will always return a string which will change the data type of the Vue data property.

If you really want to work with a Date object then you’ll need to write a component to parse the input’s value string, convert to a date object, and emit the date object back to the parent.

2 Likes

Unfortunately the Date type example don’t work with Chrome.
Thanks for explaining.

I did it using a computed value:

		data(){
		return {
			birthdate: {
				d: '01',
				m: '01',
				y: '2018'
			}
		}	          
	},
	computed: {
		_birthdate: {
			get(){
				let {d, m, y} = this.birthdate;
				return `${y}-${m}-${d}`;
			},
			set(newVal){
				let [y, m, d] = newVal.split('-');
				this.birthdate = {y, m, d};
			}
		}
	}

100% working
This is very simple to bind date with input type=date
<input type="date" class="form-control" v-model="birthdate" />

data(){
return {
birthdate: “”
}

look on this link working fine

yes working click on this link

Unfortunately, <input type="date"> is not supported by Safari. So, unless you’re willing to gracefully degrade in Safari to text boxes, they have to be replaced by an alternative solution: a Vue date-picking component, perhaps. There are polyfills for <input type="date">. I tried 3 of them (2 of them are forks though) and none was compatible with Vue.js:

  1. configurable-date-input-polyfill - npm
  2. GitHub - jcgertig/date-input-polyfill: Automatically adds datepickers to input[type=date] on IE, Firefox, and OS X Safari.
  3. GitHub - brianblakely/nodep-date-input-polyfill: Automatically adds datepickers to input[type=date] on IE, macOS Safari, and legacy browsers.

It appears this situation changed a couple weeks after your comment:

https://caniuse.com/input-datetime

Basic date input is now supported in Safari on Mac and iOS.

Firefox has support too now.

Yes, Safari has finally joined the party. Our project implemented a third-party component for this, but now we can refactor it to <input type="date">