Allow User to Select Time Only (To Indicate Availability)?

I am building an availability selector where caregivers can indicate their general availability (not date-specific). As you might imagine, caregivers can have different time slots during the day that they are available for work. What I need is, for the user to select a start and end time, but the end time cannot be before the start time.

They will need to be able to add additional time slots, but the additional slots cannot be before the slots before it.

Time was confusing for me. When I understood it to be a number based on milliseconds it became a little clearer on how to set up the conditionals to do something like this using the mathematical calculations such as greater than or lesser than.

In this case you need to set conditionals so the end dropdown only shows options that are greater than the value of the start dropdown.

So, these are currently dropdowns that contain text values (so the user cannot mistype their availability) - where do you set the dropdown type to a number?

In the drop down element

You can check out a post I put up on how to create your own time slots. I did this as it made working with time for me personally much easier.

It looks like the data has to be dynamic in order to get that number field. If that is the case, is it still possible to have different users bind the data to their profiles? It would seem the original database containing the dynamic data would constantly be changing instead saved to an individual user’s profile.

Would you be willing to share a link to your editor?

Yes you just need to set the DB up to do so.

This app has two pages. One to set up an automatic creation of the time slots so you can choose which intervals you’d like or set up for multiple different intervals.

The other is an availability selector. I’m not sure the availability selector is working or not. When I first built it, it worked, then stopped randomly and bubble was never able to provide support for why it stopped in my original app. If I remember correctly this was the app I had to build to demonstrate to bubble support the fact it worked as I had set it up. Can’t recall all the details but was frustrated enough that I didn’t want to build it all again a third time to get it working in my original app again.


It works still, but not a full robust availability selector.

So, I have this time selector. I am trying to make it so that the time slots only show times that the user hasn’t already selected. Here are the initial selection options. The dropdowns show data type ‘Time Slot’ - once the user clicks ‘Save’ the time slots get saved as data type ‘Caregiver Availability’.


After a user selects a time range (5:00 am - 5:00 pm for example) and it gets saved as data type ‘Caregiver Availability’, I need for the list of time slots to only populate times that do not fall between that range because a caregiver can list various availability time slots for each day. I hope that makes sense.


This is what I have, but I don’t think it’s right:

So in your example above you would want the user to have the ability to select a start time between 12AM and 5AM as well as 5PM to 7:30PM or 11:30PM to 11:59PM?

I think that will be really tough and you should consider how you are trying to ‘force’ your user to do the right thing.

I believe a better UX would be to first allow the user to select any start time. After that the end time that they can select is 15 minutes later or more (ie: the next time slot or greater).

Then once they save that time range you only allow them to choose a start time that is the end time for the first range.

So 5AM to 5PM is first range. Then the user only has the ability to choose 5PM or later for the start time of their next time range.

For this, your choices sources should be

search time slots : filtered

Then you filter constraint would be ‘number’ (I’m saying number to represent the number in brackets next to the time; I don’t know what you called that in your database, but it is helpful to do things like this) is greater than time range end time slot.

The filtered function gets rid of all choices you don’t want the user to be able to select…

If you want them to be able to select the end time of first time range, so if ending time was 5PM and you want them to be able to choose 5PM for the next time range start, then don’t use the greater than symbol, use the greater than or equal symbol.

That is perfect. Thanks so much! :blush:

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