Dates and time

This section covers elements that accepts dates and time as user input

Date and time elements allow your users to specify a date, a time or both in different ways. Whether you want to save a user's birthday, filter search results or accept bookings in a specific time zone, Bubble offers multiple tools to set it up in a user-friendly way.

Designing a UX that handles dates and time opens up for a wide range of different scenarios. While Bubble's built-in tools provide a variety of features, there are also a lot of plugins that offer even more customization. Check out our plugin store to learn more.

How Bubble handles timestamps and time zones

WorWorking with dates and times, especially across time zones, can be complex. Bubble automatically handles time zone calculations, including adjustments for Daylight Saving Time (DST).

To learn more about how this works and how to override time zones when needed, check out the article below:

Article: Time, dates and time zones

Date/time picker

The date/time picker lets your users pick a date and a time from a visual calendar. It can also be set up to only pick a date, in which case the field to the right in the animation below will be hidden.

The date/time picker gives your users a visual interface to pick a date or both.

If you set up the element to only ask for a date, the date will be saved at 12 am (00:00) on the chosen date in the . If you have selected a different time zone in the , the date will be saved at 12 am (00:00) in that time zone.

You can set a minimum and maximum date as well as a minimum and maximum time of day, and you can set the interval for the time picker (which is 30 minutes by default).

Field type returned: date

Video lessons

• How to use the date/time picker input element

Input element

The input element is mainly used for text input, but can be set up to expect a date instead. In this case the user will not see a calendar or time picker, but will instead be able to type the date directly. Note that the input element supports dates but not time. It can be set up to format the date in:

• US format (mm/dd/yyyy)

• European format (dd/mm/yyyy)

Field type returned: date