When the book button is clicked, I create a new thing (Booking) for which I have AirDate/TimePicker A set to single date and AirDate/TimePicker B set to only timepicker.
Then in the database I want to create a new Booking for which I have date field set to date where I save the value from AirDate/TimePicker A (the date the user picked) but I also need to save the time that goes with that date which is AirDate/TimePicker B Here is my Booking thing:
No matter what, when you save a date to your database there is a time component. If you are using a date/time picker and set to only use date, when you save that date to the database, the time component is 12:00AM
When you save the date to the database using the date/time picker value which is using date and time, the time component will be automatically set to whatever the user set the time on the date/time picker.
Play around with saving dates using date pickers with date only or date and time to see how it is saved to the database.
Thanks for your quck feedback! I understand that and I already checked it. But in the particular case, I am asking how to save the input value from AirDateTimePicker B which input is set to timepicker only. What field type should I use under my Booking thing to save the latter value? I would highly appreciate if could explain that.
I guess it depends on what you want to do with this number (time). I checked and AirDateTimePicker returns the time (even if you show the timepicker only) in the selected date state and it includes the current day. See below:
From that, you can extract the time only with format as:
If you want any custom, you can choose custom and format it in the way you want:
But as far as I see, you set the field type of time as number. Maybe you should decide what this number represents. For example: You can even get the hour, get the minute and calculate the minute since midnight:
So, at the end of the day, it all depends on what you want.
Oh, you want to save the time component separate from the date…you do not need to do that, and I recommend not doing that. You should save it as a date and have the time component attached as it would be as provided by the input element, then whenever you want to work with the time component of the date you reference the date and extract the time components.
Reason being, dates and times have timezone values applied, and if you remove the time component from the date itself in your database you no longer have an ability to use the timezone functions on the time component of the date.
But anytime wanting to use only time components of dates, you use the extract operator to extract which part of the time component you want to use.
I would like the user to be able to pick a certain date and a certain timeslot (time of the day) when this consultation will occur. Times and dates in Bubble seem very complicated to me, and I have been struggling with that for a long time.
At this stage, I am not building an availability option for the user because I don’t know how yet, i.e. I simply set up a minutes step, which is obviously not dynamic in the AirDate&Time picker. I decided to go with the AirDate&Time picker because it has the option “Blocked dates” and to use it also to block dates and times whenever they get booked.
I would have gone with Bubble’s built it date & time picker because it allows to save the date and time, and to set up timeslots at the same time, but on the other hand it does not allow to block dates/times. At this stage I would like to build something that will work only in my single time zone to keep things simpler with times and dates.
I understand what you explain but the end user needs to be able to see separate values, i.e. one for the date and another value which is for a certain available time slot from that date.
How many vaues should I save in my database in this case? And as what type of values I shoud save them?
They are nothing but numbers. Date, which always is inclusive of a time component, is simply a number of seconds (or milliseconds dependent on the system - I think Bubble does milliseconds) since Epoch Time (Jan 1, 1970).
Often when working with 3rd party systems, like Stripe, dates are sent as the numerical representation being a number of seconds since Epoch Time. This is often referred to as Unix TimeStamp.
Just remember, in Bubble we can take a date (which again ALWAYS has a time component attached to it) and extract different values from it, such as Month (values of 1-12), Year (values as numbers like 2024), Date (values of 1-31), Day of Week (values of 0-6, where 0 is Sunday and 6 is Saturday), Hours (values of 0-23, where 0 is midnight and 23 is 11PM), Minutes (values of 0-60), and seconds (values of 0-60).
In all of these cases the extracted value is a Number.
Once you have come to understand this, working with dates in Bubble becomes much easier.
I am not familiar enough with this plugin to tell you 100% that the blocked dates feature doesn’t allow you to block specific times for the date, but from my experience with it, the feature of blocked dates is simply date and doesn’t provide functionality to specify specific times for that date as well, meaning if you block January 1, it is completely blocked from Jan 1, 12AM to Jan 1 11:59:59PM.
You can do this with any date/time picker as a date ALWAYS has a time component attached which you can extract to save as a separate field from the date field, but I do not recommend doing this.
It definitely does. Bubble has however, introduced features over the past 12 months to make working with multiple/dynamic timezones easier than in the past, but still trying to wrap our heads around how Dates and Times are connected is easier at first if not considering timezone at all.
In a more simplistic system, you can create an option set.
The above screen shots are just examples for you to glimpse to get some ideas around how Time can be thought of as Numbers.
For creating time slot option set, you can have the display value be the timeslot such as 10:00AM - 10:30AM. You can have an attribute for Start Time as a Number which should be the 24 hour numerical representation, but that won’t suffice due to the need to have minutes associated because you may have timeslots that are 10:30 for example, so it would be something that can be achieved by adding another attribute of Start Minute and rename the first to Start Hour, and you save those attributes accordingly, so Start Minute would be 30 and Start Hour would be 10 (if AM it’s 10, if PM it’s 22).
But you could also just consider that you have an ability to manipulate dates in Bubble by using the operators after a date in dynamic expression such as Add Minutes or Change Minutes. If you were to rely on using the Add minutes operator, your Start Time attribute could be the number of minutes from 12AM that is your Start Time for the timeslot, so a start time of 10:30AM would be a StartTime number of minutes being 630 (10 hours * 60 minutes + 30 minutes).
Then when you have a date selected from a date picker you can say in a dynamic expression, date:plus minutes option set StartTime attribute value. This would require the date picker to only select dates so that all time components that are ALWAYS attached to the date are set to 12AM by default (as that is the default time component for any date selected by a date picker set to date only) and then it will add the number of minutes from the attribute StartTime value (given you are using that as a number of minutes) and in the example above that would add 630 minutes to 12AM which is 10:30AM.
There are always multiple approaches one can take to achieve the same type of functionality, so when providing a user an ability to select a date, in your system, I’d recommend using a Date/Time Picker set to Date only. Then have an option set created for your time slots and use a Repeating Group to show the Time Slots and a user can click on a time slot to select, which then you use the StartTime attribute (and should also have an EndTime attribute) to modify the Date selected from Date picker to add the appropriate number of minutes. In the database, you should have a field for Start Date and End Date which the manipulated Date from Date picker is saved (so Start Date uses the date picker value plus minutes and the selected time slot option set attribute value of StartTime).
On the booking data type, I’d suggest having a field related to the Time Slot option set, so that when you show available Time Slots you can filter and remove from view the Time Slots that have been saved onto the booking data types for the person getting booked. You will also need the booking Start Date and End Date as mentioned above. You may also opt to have an additional field of type Date Range to save the Start and End dates as a range field (sometimes it is easier to work with single dates like start and end and others it is easier to work with date ranges). You may also want to save a field of Date that is simply the Date value as selected by the date picker, whose time component would be by default 12AM (needed for filtering).
So in your booking system, the User selects a Date from a Date/Time Picker set to Date Only, then change view for them to choose TimeSlot. The use of Change view gives time for your system to filter out all timeslots not available.
You filter out those time slots by having all existing bookings for the user getting booked loaded (can be an RG that is in a floating group set to float underneath page so that it is out of view of the user and doesn’t affect design layout of page)…Your existing loaded bookings should only be those whose date field is equal to the date picker value (use constraints on the search of bookings to filter the user and date).
Then to filter available timeslots you will in the RG to display the option set of Time slots use get option all timeslots with :filtered operator that would be Timeslot is not in bookings timeslot field (remember, Bookings has a field related to the timeslot, an you need to reference the out of view RG in the floating group that holds the filtered list of bookings for the user and the selected date, list of bookings as the portion that follows the is not in operator used to filter the timeslots).
