Transcript

In this Quick Tip, we're going to learn about the Date/Time Picker element. This element allows your users to choose a date from a calendar that can be used in fields of type "date". If you were making a to-do app and wanted to schedule a due date, this element would be the perfect fit.

When we add this element to the page, we get what looks like any regular Input element. But, when we preview and click this element, we get our calendar that can change the date.

We have a ton of customization properties that make this element more flexible. First, we can choose if we want this to display only the Date or the Date & Time. If we do, we are given more properties to control the time input that appears. This then gives us a separate dropdown displaying times to choose from.

We have properties to customize both of these. First, we can set the calendar to start on a Monday, as well as let the month and year have their own dropdowns. For our time picker, we can set the interval in which times are displayed between each option: every 30 minutes, hour, etc.

We can also format the time and how it's shown, as well as set minimums and maximums for the date and hour. This will prevent users from choosing a date/time before or after a certain day/hour of the day.

These fields can also be dynamic, though the date fields must evaluate to type "date" and the hour fields must evaluate to type "number", and must be in 24-hour format.

You can also style the calendar and the date format that is provided. Experiment more by adding your own Date/Time Picker element to your app!

That's it for this Quick Tip! For more, be sure to check out bubble.io/academy.