Emitted value wrong on UTC+2 if range's initial value is from 2 different months and timezone observes DST

[jfpromoter]

Describe the bug Emitted value is wrong if the range's initial value is from 2 different months and timezone observes DST (I guess?). I made a reproduction case here

To Reproduce

Use this link

1. Change your timezone to UTC+2, in my case I tested it with Warsaw - Poland
2. Notice that the initial model's value is from March to April
3. Select dates April 8 to April 14
4. The starting date in the model is 2024-04-07T23:00:00.000Z but the displayed date is 04/08/2024

It works correctly if the initial value is from the same month, i tested it with const model = ref(["2024-04-23", "2024-04-29"]);. I did the same steps above and this is what I got.

Expected behavior It should emit the correct start date.

Desktop & mobile (please complete the following information):

• Browser - Chrome 124.0.6367.91
• Library version 8.5.1

[spintokha]

Same issue.

[DilinaHirantha]

Same issue here, anyone got fix?

[spintokha]

Same issue here, anyone got fix?

Works in my case using converting:

dateRange[0].toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' })

[DilinaHirantha]

Below is my case & the solution I used: In my case as like above, converted the dates just using the toLocaleDateString and made utc option in the Vue Date Picker to false. Also I have used disabledDates option and there I had issue with disabling of provided start date. To fix that I just set the time as midnight for starting date by the code as below,

var starDateMidNight = moment(this.startDate).startOf('day').toDate();
 this.disabledDates = {from:this.finalScheduleDueDate, to:starDateMidNight};

[Jasenkoo]

I am not sure what you are trying to achieve exactly, but I would suggest using the timezone prop if you need to keep a specific date across the time zones. The example you are showing is not quite correct because when you print the date in the <template>, it is converted to an iso string.

Given that our date object looks something like this:

Mon Apr 08 2024 01:00:00 GMT+0200

When you add toISOString() , that same object will be represented as

'2024-04-07T23:00:00.000Z'

Furthermore, the dates you specified are covering daylight savings change, where parsing the 2024-03-23 gives

Sat Mar 23 2024 01:00:00 GMT+0100 (Central European Standard Time)

and parsing 2024-04-29 gives

Mon Apr 29 2024 02:00:00 GMT+0200 (Central European Summer Time)

But changing the range from march to April parses both dates in Central European Summer Time, therefore the result is expected.