(Mobile App) Time PIcker incorrect date

Need help
1

Hi all, I am programming an availability system in which I have a Date Picker and two time pickers, one for the start time of availability and another one for the finish one, my problem being is that when I create the availability, the date input is correct but the time pickers give current date + the selected time, which basically makes it impossible for me to use it, is there any better way to create an availability system?

Best regards,

Daniel

2

Hi Daniel,

First of all Welcome to the community!

I’ve run into the same issue before. The key is that Bubble’s time picker only stores a time, not a full date, so when you save it, it automatically combines it with the current date. A common approach is to take the date from your Date Picker and then use the :change hours and :change minutes operators to combine it with the time from your time picker. That way, you get a full date-time value that reflects the correct day and the selected start/finish times.

It’s a bit of a workaround, but it usually does the trick for availability systems. Hope this works out.

1 Like
3

The :change hours and :change minutes approach is exactly right. Here’s the complete formula:

DatePicker’s value :change hours to TimePicker’s value:extract hours :change minutes to TimePicker’s value:extract minutes

This merges the date from your date picker with the time from your time picker into one datetime field.

For your availability system:

  • Set start_datetime = DatePicker :change hours to StartTimePicker:extract hours :change minutes to StartTimePicker:extract minutes
  • Set end_datetime = DatePicker :change hours to EndTimePicker:extract hours :change minutes to EndTimePicker:extract minutes

Store both as datetime fields in your database. This way you get the correct date with the selected times.

Common gotcha: Make sure your database fields are set to datetime type, not date only.

4

Hey Daniel,
I’ve actually dealt with that same issue before. The date comes through fine, but the time pickers always stick today’s date on top of whatever time you choose super frustrating.

What usually works is to just take the date from the date picker, take the time separately, and then combine them yourself when saving. That way Bubble doesn’t sneak today’s date into the mix, and you end up with the right availability slot.

Have you tried doing it that way yet, or want me to show you how to set it up?