DatePicker time zone, return value format

The DatePicker component returns a JS Date object; the problem with that is the Date object includes time/time zone information, so folks using this component need to be extremely careful about extracting the year/month/day. It would be great if an option were added to the existing component so that a value in the format ‘2024-03-16’ were returned, or in the next version of the component that was the default format returned.

The simple way to think about it being that a user choosing a date is choosing a year, month, and day, they are not choosing a time nor do they care about time zones. If they choose ‘June 6th, 2022’ in the component, they expect our code to get that exact value. But because time/time zones are being involved, it’s very easy for our code to end up getting June 5 or June 7.

For folks using this component now, be extremely careful when using the date picker. If you naively use the value from the datepicker to do something like “get all the appointments from my database that occur on this day that the user chose in the ui bakery component” you can easily get the wrong appointments. Scroll through the answers with a particular focus on the comments about time zones and UTC to learn more: Format JavaScript date as yyyy-mm-dd - Stack Overflow This answer touches on the problems: Format JavaScript date as yyyy-mm-dd - Stack Overflow

Dates and times are extremely important in our app and I haven’t had time to fully test yet, but once I do I’ll add some comments below on how we are handling this.

Thanks, and UI Bakery is awesome!

2 Likes

Hello @john and welcome to our community!

Thank you for your post. Indeed, working with the date picker can be tricky. We also have a guide about working with the timezones while using our date picket components - you might find it helpful!

Yep, that’s a datetime picker, emphasis on the time.

The date picker should have no time/time zone whatsoever.