How can I combine a date and time into a datetime

I have only been using Bubble for about 4 months, so this may be a really noobie question, but I can’t figure this out.

I have a pop up where the user needs to select a single date, a start time and an end time.

I know I can handle this by using two separate date-time pickers and checking to make sure the dates are the same. But what I would like to do is the following:

  1. Let the user select a date
  2. Let the user select the start time from a dropdown of time values.
  3. Let the user select an end time from a dropdown of time values.
  4. Calculate and store the start datetime by combining the selected date and start time.
  5. Calculate and store the end datetime by combining the selected date and end time.

It’s the “calculate” part of steps 4 and 5 I am having problems with.

Any ideas?

1 Like

I’m right there with you – new to Bubble, which may be why I had this exact same question. Fortunately, it’s easy and possible as long as all date/time selections are formatted as dates, not numbers, text, etc. This is what I did (note: I will explain everything in hours for simplicity sake, but it can be done for minutes):

Create a data set to capture a user’s availability

  • I created one called “meetings” which includes a StartDateTime field and an EndDateTime field

Create a data set for time-intervals

  • add a time field and a time-number field
  • I uploaded a csv to save time, but add 24 date/time fields (time) from 01/01/2000 01:00am through 01/02/2000 12:00am AND add the corresponding 24 hour format as type number to the field (time-number) so 01/01/2000 01:00am = 1 and 01/02/2000 12:00am=24

Create the form:

  • For the start date, simply add a date field (only date)
  • for the start time, use a dynamic dropdown and set the data to search for time-intervals, display field “time” in whatever format you want, but sort by “time-number” desc: no
  • repeat for end time, but add a constraint that time-number > start time time-number to prevent and end time prior to start time

Create the workflow: upon form submission, you want to:

  • set the start date to the start date input date, but swap the start time for the start time inputs value – which will yield an expression like this
    set field StartDateTime = StartDate’s value change hours to StartTime’s value: extract hour
  • set the end date to the start date input date, but swap the time for the end time inputs value – which will yield an expression like this
    set field EndDateTime = StartDate’s value change hours to EndTime’s value: extract hour

it may be helpful to add:rounded down to hour to ensure you’re working with whole number

image

That should give you what you want…an additional benefit of creating a dataset for time-intervals, is that you can use those intervals to provide time slots to display to users in a calendly-like manor. Hope this helps!

Sorry for the late reply, but that’s awesome!

Thanks for the info!

This topic was automatically closed after 70 days. New replies are no longer allowed.