Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Different format between value in input and vue data.

See original GitHub issue

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

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

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 image

thanks and wish can understand what i facing currently.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

sinandomengcommented, Mar 4, 2019

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

Reference(s): #329

ChewySalmoncommented, Aug 19, 2019

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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Form Input Bindings - Vue.js
It automatically expands to different DOM property and event pairs based on the element it is used on:
Read more >
vue.js - Is there anyway to set a different value for the "input ...
Simply define the getter and setter of the computed property: computed: { formatRCBulletinNumber: { // getter get: function () { return ...
Read more >
Vue.js Form Input Value Binding - GeeksforGeeks
The v-model can be used to create two-way data bindings on form input and textarea. The input with text types and textarea uses...
Read more >
How to Get an Input Value in Vue - JavaScript in Plain English
To get an input value in Vue, we can use the v-model directive to set up a two-way binding between the value and...
Read more >
What you should know about Vue v-model - LearnVue
How to use v-model for two-way data binding between two components. ... vue. <template> <div> <input type="text" v-model="value" ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found