Datepicker selects next day

[jfvoliveira]

Describe the bug When picking a day, say day 3, the selected day in the calendar is 4. The value is working fine, the correct day (3) is sent to the database with the wire:model but the selected day is wrong.

From what I can tell, it happens only in a few months. For instance, January, February and March have the issue. From April, Mto October is fine. November and December, happens again.

To Reproduce Steps to reproduce the behavior:

1. Go to https://livewire-wireui.com/docs/datetime-picker and test it. It happens there.

Expected behavior The selected day should be the one picked.

Screenshots

Desktop:

• OS: Windows 11
• Browser: Chrome
• Version: 100.0.4896.127

[PH7-Jack]

@jfvoliveira Thanks for reporting. It's related to the user timezone. If you don't want to work with timezones, just add the without-timezone attribute to the component

[jfvoliveira]

Hey there @PH7-Jack . Don't think it's that. I have the :without-timezone="true" set.

[PH7-Jack]

Is your error still persisting in the latest version? Could you add a list of days that have the error?

[jfvoliveira]

I've updated wireui to 1.3.2 (had to delete the vendor folder and republish the assets) and still have the same issue.

January is messed up. Always selects the next day. When the 31st is selected, no date is selected in the picker. February is the same except when I select the 28th. In that case, no date is selected in the picker. March is the same as February. Messed up from 1 to 27, 28 doesn't select the date and 29, 30 and 31 are ok. April, May, June, July, August, September, October, all fine. November all messed up (selecting next day). The 30th no date is selected in the picker. December all messed up (selecting next day). The 31th no date is selected in the picker.

This feels like some calculation is messing up in the final days of a month and that breaks the rest of the month.

[gbrits]

In the end I stopped casting my date and allowed it to be a string and it rectified all Pikaday issues I was having - sorry to re-open but wanted to assist someone that may be head scratching.

[PH7-Jack]

@jfvoliveira @gbrits Are you with the same error?

[gbrits]

In my instance I had a DATE type column and needed to change it to a DATETIME in order for it to be read properly, the timezone appears to be appending correctly. Thanks @PH7-Jack

[gbrits]

@PH7-Jack I spoke too soon with the above - I'm still experiencing weird results when using the datetime picker without time to record dates.

I'm recording in Australia/Perth timezone, which is GMT+8. I will record a date on a new row (MySQL) - at 11am, and it will record it at 3am, then when I edit and save at the same date it then saves it as 11am. Any idea why would that occur? Or if there's something I need to change? I have the date cast as a datetime in the model and my Laravel config has the timezone set to Australia/Perth

Secondly - when creating a new item and the form touches the server with reactive / Livewire events - such as a select changing for example I am still seeing the date suddenly change to a day earlier - presumably as it calculates the timezone against the selected date.

I have experimented with & without without-timezone but haven't found the winning combo just yet.

<x-datetime-picker
    without-time
    without-timezone
    wire:model.lazy="budget_item.date" />

also tried diff syntax:

<x-datetime-picker
    without-time
    :without-timezone="true"
    wire:model.lazy="budget_item.date" />

What I (& others above) are still experiencing is changes between day moving back / day moving forward as the timezone element is calculated despite the without timezone flag being present. Could it be a config / vendor related issue if you're not experiencing the same in your tests?

[gbrits]

Here are my tips for overcoming the date issue (so far) - I think this has solved it 🚀

On the model you are using, add this method:

    use DateTimeInterface;

    ...

    protected function serializeDate(DateTimeInterface $date)
    {
        return $date->format('Y-m-d\TH:i:s.u');
    }

Also cast the date to a datetime (ensure your column is a datetime, not a date)

    protected $casts = [
        'date' => 'datetime'
    ];

Lastly, I found it useful to specify the timezone into the component as well:

<x-datetime-picker
    without-time
    :timezone="'Australia/Perth'"
    wire:model.lazy="budget_item.date" />

[1337erik]

This definitely takes some tinkering with timezones, I had the issue where the datepicker was consistently choosing the previous day as opposed to the next day. Here's our configuration that seems to be working now:

The key attributes that seem to be effecting things the most is "without-timezone" and "user-timezone".. its confusing why user-timezone would still need to be defined considering "without-timezones" is set but if I dont set the user-timezone then im grabbing the wrong days consistently..

[cloudstudio]

Hello guys, this keeps happening, has anyone found a solution?

[Krato]

@PH7-Jack I found something interesting. Let me show you by examples:

1. With timezone Europe/Madrid - Works well

   <x-datetime-picker
    without-time
    :timezone="'Europe/Madrid'"
    wire:model.lazy="date" />

   https://user-images.githubusercontent.com/74367/208436920-a15cdd96-4b15-4dcb-bf6c-3b4a1c341c9f.mp4

2. With timezone Africa/Johannesburg - Doesn't work

   <x-datetime-picker
    without-time
    :timezone="'Africa/Johannesburg'"
    wire:model.lazy="date" />

   https://user-images.githubusercontent.com/74367/208437114-f604757a-ac53-4ac0-a3eb-5cc82fe00960.mp4

So, why don't use the timezones if without-time option is set?

[blockhunts]

I have similar problem where at initial datepick after page refresh, it always selected the next day,

I changed the "without-timezone" to "timezone" And now it is correctly display the selected date.

Cheers