Different format between value in input and vue data.

In my vue data it show 😦 format is what i want (DD/MM/YYYY) Nov 01 2017 in moment)

In my input value show diffrent format (MM/DD/YYYY) Jan 11 2017 in moment

My Code Below: Vue Template <datepicker id="edit-join_date" :value="editForm.join_date" placeholder="d/m/Y" @selected="onDateSelect" inputClass="form-control" :format="format" required></datepicker>

Vue Data editForm: { join_date: moment('2017-11-01 00:00:00').format('DD/MM/YYYY') }, //Value from database set at axios response. default value is null (The screenshot upside is after data set.)

Vue Methods onDateSelect(date){ console.log(date) // this.editForm.join_date = moment(date).format(‘DD/MM/YYYY’); // }, format (value) { console.log(value) // Wed Jan 11 2017 00:00:00 GMT+0800 (+08) return moment(value).format(‘DD/MM/YYYY’) },

when i want to change that date, it detect at correct format(DD/MM/YYYY) as Jan 11 2017

thanks and wish can understand what i facing currently.

[sinandomeng]

Any solution this 2019? I’m having the same problem. The format works fine but the result is different.

Reference(s): #329 https://github.com/ridewn/vue-date-picker/issues/3#issuecomment-329007983

[ChewySalmon]

I found an alternative approach to formatting the bound Vue model variable.

Here is how my datepicker is defined:

<datepicker id="datepicker" @input="formatPicker()" v-model="trackedDate" :format="dateFormat"></datepicker>

As you can see in the above, I’ve set up an event emit dubbed ‘formatPicker’ for when input is received. This is handled by a method defined within my Vue app as seen below:

data : {
	trackedDate: '',
	formattedDate: ''
},
methods: {            
	formatPicker: function(){
		var self = this;
		var d = new Date(self.trackedDate);
		self.formattedDate =  d.getUTCDate() +"/"+ (d.getUTCMonth()+1) +"/"+ d.getUTCFullYear();
	},
}

Using Date, you can manually define the format. This will result in the trackedDate variable matching that of my defined format ('DD/MM/YYYY') stored within formattedDate. Of course these can be swapped out to match your own.

Assuming you’ve established the format you want using the :format property, you’ll now have both the format (in the picker) and the date you want following user input/selection.

Hopefully this helps as a workaround!