Element: [Bug Report] Datepicker saving wrong date to v-model

[stevepop]

Element UI version

1.2.5

OS/Browsers version

Chrome version 56

Vue version

2.1.10

Reproduction Link

https://jsfiddle.net/stevepop/f9et5soz/

Steps to reproduce

Pick a date 28/3/2017 in the start_date field

Pick another date 31/3/2017 in the end date field

The dates picked will be printed under the datepicker inputs

What is Expected?

I expect that when I picked Start Date 28/3/2017 then I should have Start Date: "2017-03-28T00:00:00.000Z" printed and when I picked 31/3/2017, I should have "2017-03-31T00:00:00.000Z" printed.

What is actually happening?

When I pick Start date 28/3/2017, What is saved in the v-model is "2017-03-27T23:00:00.000Z" and when I pick the end date 31/3/2017, what is saved in the v-model is 2017-03-30T23:00:00.000Z.
The implication is that my users always have the date saved as date - 1 day. We don't care about the time element but expect when we select a date, then that date should be saved.
Thanks!

[Leopoldthecoder]

It's time difference: https://jsfiddle.net/leopoldthecuber/f9et5soz/1/ . I suppose if you open this demo, the displayed date is always one hour earlier than your local time.

[stevepop]

Hi @Leopoldthecoder, the datepicker is meant to select actual date, I don't care about the time element or else I would have used your datetimepicker.
This is really confusing to my users, so what is the solution to this please?

[Ca-aC]

Any update on this?

[Leopoldthecoder]

Like I said, this is not a bug and totally normal. You can always format dates yourself: https://jsfiddle.net/leopoldthecuber/f9et5soz/2/ .

[Ca-aC]

Maybe I'm missing something here. But see the pic: <input type="date"> and <el-date-picker type="datetime"> work as expected but not <el-date-picker type="date">.

Anyways, I switched to using <el-date-picker type="datetime"> so I'm ok now.

https://jsfiddle.net/CaCa/13zf9m1k/1/

[AlexStacker]

my solution:

js code

import dateUtil from 'element-ui/lib/utils/date';

......

methods: {
        handleDateChange(idx, date, ele) {
            if(date instanceof Date){
                ele.date = dateUtil.format(date, 'yyyy-MM-dd');
            } else {
                ele.date = date;
            }
        }
    }

html code

<el-date-picker type="date" format="yyyy-MM-dd" :value="scope.row.date" @input="handleDateChange(scope.$index, $event, scope.row)" placeholder="选择日期">
                  </el-date-picker>

[mtilokani]

I am facing same issue, is there any proper solution for this problem?

[naijaprizes]

@mtilokani, I stopped using this component because the author does not believe this is a bug.

[mtilokani]

@naijaprizes Even I also now need to stop using. Need to look alternate solution for this.

[AlexStacker]

@farcasmihai91
Why you given me a down? Is not a good idea?

[rickbolton]

@Leopoldthecoder have you tried changing your timezone to the UK to see the issue?

It appears that due to the clocks going forward and backwards it causes the date to return 1 hour behind which then means the date selected e.g. 21/06/2017 is returning 2017-06-20T23:00:00.000Z.

So regardless of your suggestion to .getDate() etc it would still say the wrong date.

To explain further our clocks went forward on the 26th March:

Our clocks go back on the 29th October:

This is a bug..

[stevepop]

@Leopoldthecoder, everyone here can't be wrong and you are right. Clearly there is an issue with the Datepicker that shows that it is a bug. The last post is a clear indication that something is wrong. This issue was opened by me since March and I've had to switch to another Datepicker component because you flatly refused to acknowledge that there is a bug here and have refused to respond to others who have confirmed that there is an issue.

[Leopoldthecoder]

Here's some clarification:

First I'd like to mention that the value of DatePicker is a Date object, not a string. So when you try to display it on the screen using {{ start_date }}, you are actually seeing its string representation. Generally browsers call toISOString to get a Date object's string representation, and toISOString always returns a string whose timezone is zero UTC offset: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString .

Back to DatePicker. When you click a day on the panel, you'll get a date in your local time. For example, if you click 21 of June 2017, Element simply assign the value to new Date(2017, 5, 21).

Note: Where Date is called as a constructor with more than one argument, the specified arguments represent local time. If UTC is desired, use new Date(Date.UTC(...)) with the same arguments.

So you'll get 2017-06-21 00:00:00 in your local time. And unless you're in +0 timezone, 2017-06-21 00:00:00 in your local time is different from its string representation, as the latter one is in UTC. You can verify this in your console:

const a = new Date(2017, 5, 21)
console.log(a.toISOString())

I assume @stevepop is in +1 timezone because he gets "2017-03-27T23:00:00.000Z" when he picks 03/28/2017. And as I'm in China (+8 timezone), I get "2017-06-20T16:00:00.000Z" (but 2017-06-21 00:00:00.000 in Beijing time) when I pick 06/21/2017. This is all intentional.

@stevepop , you said in your earlier response that the datepicker is meant to select actual date. In fact, DatePicker is giving you the actual date, and it's giving you the actual date in your local time. We chose local time over UTC because in most cases local time makes more sense for the end user. And if you do need UTC, you could convert it.

@rickbolton you have Summer Time in UK. UK Summer Time is one hour ahead of UTC, so when you pick a day in Summer Time, its string representation is one hour earlier. Outside the Summer Time, your local time is the same as UTC, so you'll get zero o'clock when you pick 26/03/2017 and 30/10/2017 .

I hope this clarifies some misunderstanding. I know it'll be more straightforward if the value is just a plain string, e.g. '2017-06-21'. But since it's a DatePicker, we think it's more reasonable if it gives you a Date object.

[mtilokani]

@Leopoldthecoder Is there any solution to get a correct selected date? As we can't show wrong date to user. My timezone is +5:30 (IST).

[Leopoldthecoder]

@mtilokani You can format a Date object regardless of what timezone you're in, as the getters are based on your local time:

#

The simplest way is to use toLocaleString: https://jsfiddle.net/f9et5soz/5/ . For more flexibility, you can use the above getters: https://jsfiddle.net/f9et5soz/6/

Plus, there are many date formatting libraries in the JavaScript community, like fecha and moment . If you prefer fecha: https://jsfiddle.net/f9et5soz/7/

[yyxx9988]

https://jsfiddle.net/stevepop/f9et5soz/ This is definitely a wrong logic. Why not just return a string instead?

[spopoola]

This issue keeps coming up even though the Author believes it is not a bug.

[dehypnosis]

Amazing author.
You are right, but here, nobody don't know about Date of javascript.
It is not just about the timezone too.

What do you think why people use component for?
I don't wanna add any date converting logic to any of my pure UI components.
I just wanna believe date picker component will do pickup a date and convert it.
And everyone will also do believe like that.
You seems don't know what is the component and why people encapsulate, reuse things.

I have collected every form items to one component and binding to one deep nested Object.
Here every other form items give me what i wanted, or requested.
But just your datepicker stuck into my data flow.
Not Everybody send Date as ISO format.

You have already wasted many people's time, and not seem to wanna listen to anyone's opinion.
Anyway thanks for your work.
I just have overwritten your job to fit my taste.

---

import ElDatePicker from 'element-ui/lib/date-picker'
import dateUtil from 'element-ui/lib/utils/date'

export default {
  name: ElDatePicker.name,
  mixins: [ElDatePicker],
  props: {
    valueFormat: String
  },
  methods: {
    $emit(type) {
      let args = Array.prototype.slice.call(arguments);
      if (type == 'input') {
        if (args[1] instanceof Array) {
          for(let i=0;i<args[1].length; i++)
            if (args[1][i]) args[1][i] = dateUtil.format(args[1][i], this.valueFormat || this.format)
        } else if (args[1]) {
          args[1] = dateUtil.format(args[1], this.valueFormat || this.format)
        }
      }
      this.__proto__.$emit.apply(this, args);
    }
  }
}

Anyone who need to get String from this component, can override the component.
Just install above component after element-ui installed.
This will not change any logic but the value format.

Usage: same with original. But it will update bound values as String format of provided stringFormat prop or format prop.

[hueidou]

@Leopoldthecoder
Since

the value of DatePicker is a Date object, not a string.

I suggest use a object as a initial value in examples of element user manual. it confused me and maybe others.

[futurexiong]

@loopArray I don't know why these two guys gave you a down vote. Your solution works for me. Thanks.

[Johannes-Berggren]

@Leopoldthecoder please fix this. When I pick a date, it is pretty obvious that I want that exact date.

[rickbolton]

@JohsBerggren I've found the best way to deal with this issue is to use moment

moment(this.dateTime).format('YYYY-MM-DD HH:mm:ss')

I personally agree that it should return a string rather than giving you a date Object but hey ho

[Johannes-Berggren]

@rickbolton Awesome, thanks man.

[alashow]

What a _discussion_!
I guess the _issue_ will be solved by this http://element.eleme.io/2.0/#/en-US/component/date-picker#formatted-value

[rickbolton]

Yes, I guess that fixes this non issue haha

[stevepop]

Yep, looks good in the new version 👍

[yashsway]

The bug is still there. You pick one date, and it picks the previous date. So annoying.

[mmarquez]

I think that the value-format should be checked in picker options too.

[farcasmihai91]

I am trying to save a date of birth (emphasis on date) into my PostgreSQL database.
PostgreSQL knows the difference between a date type and a timestamp with timezone, so the database column is defined as simply a date.
When I use this component to select a date, then send that date object to the database it inserts that date - 1 day. Because somehow, it is normal to have a time value on a date object, moreover that time is not even 00:00:00.
So you can surely see, that from an outside perspective this is ludicrous.
Now we do understand the technicality about why this is happening!
That was not the point, the point was that we are using the default el-date-picker, not a el-date-picker with type="datetime".

Anyway, the solution that I think makes sense is to send to the database the date.toDateString() which removes the timezone from the date, making it a pure date.

Thank you!

[pmochine]

Oh man thank you guys for value-format. It's also a bug for me. I know it's a DatePicker, but we don't need the JavaScript Date but the real Date the user picked. But the good thing is that we have now two options! Thank you

[JulioGuedesCordeiro]

change from date to datetime in the bank,
sorted out

[sazid]

I solved it by using the format and value-format attributes. When sending the data back to the server just use something like new Date(this.modelName) or just the plain string that you get. The db should be able to handle this value by itself.

<el-date-picker
v-model="modelName"
type="datetimerange"
format="yyyy/MM/dd HH:mm A"
value-format="yyyy/MM/dd HH:mm A"
range-separator="To"
start-placeholder="Start"
end-placeholder="End"> </el-date-picker>

[tihomir-kit]

The thing is, I don't want to be handling every single datepicker value I have in my app. I want a centralized way of sorting it out so it works in the same way across the board. If I have to customize every single usage of the datepicker what's the point then?

Perhaps just provide an option on how people want it to behave.

Edit: Seems like using this attribute is enough to force the "out value" to spit out a date only (thanks @sazid):

value-format="yyyy-MM-dd"

[wongchance]

attr value-format="yyyy-MM" works fine for type="month"

[omerciftcibasi]

I am on GMT+3 timezone. The date-picker below, set wrong date for only the month February for month selection. When I select the February, it set model value as '2020-01-31 21:00', for the rest of months, the value is fine as '2020-mm-01 21:00'
mm*: selected month.

<el-date-picker v-model="row.paymentDate" :clearable="false" :picker-options="datePickerOptions" value-format="yyyy-MM-dd" type="month" format="MMM yyyy" placeholder="Select Month"/>

From the inspiration of wongchance's comment, I changed as
value-format="yyyy-MM"
and it works now.