CODEWITHSUNDEEP
datepickervuejs2element-ui
dede.brahma
dede.brahma

Reputation: 329

VueJs - el-date-picker : How to set format default value new Date()

I use el-date-picker to set form date with default value is new date. But when it save the value of date is yyyy-MM-dd.

how to set :default-value with new Date() and format new Date is yyyy-MM-dd?

here my code

<el-date-picker v-model="value1" type="date" placeholder="Pick a day"
   format="dd-MM-yyyy" value-format="yyyy-MM-dd" :default-value="defaultDate">
</el-date-picker>

return {
    defaultDate: new Date('2018-06-22')
  };

here my fiddle: https://jsfiddle.net/dede402/8fkmt2wv/11/

Upvotes: 0

Views: 16194

Answers (1)

jedik
jedik

Reputation: 1244

Well, I hope I understand your problem correctly, but it seems to me that the default-value attribute works in a different way than you probably expect.

It does not set the default value to model variable in case the model variable is not set, but when you open the date picker (the calendar widget), you may see it is set to month and year you specified in default-value.

As the docs (http://element.eleme.io/#/en-US/component/date-picker#default-value) clearly say:

If user hasn't picked a date, shows today's calendar by default. You can use default-value to set another date.

If you wanna set default value to model variable (value1 in your fiddle), just do:

data() {
  return {
    value1: new Date('2018-06-22')
  };
}

This is gonna set the default value, you probably expect.

Upvotes: 4

Related Questions