Date Time Picker

The Date Time Picker offers a visual interface for selecting dates and times, with options for day, week, and month views, and support for recurring appointments.

Tutorials

How to Block Out Times

Configuring the Date Time Picker

Setting the Interaction Type

The Selection Type property controls how users choose time slots:

• Single Select (Radio Buttons): Users can select only one time slot at a time. This is ideal for scheduling single appointments or events.

• Multiple Select (Checkboxes): Users can select various time slots simultaneously. This allows users to book multiple appointments or reserve several time slots in one action.

Choosing the Display Variant

The Variant property controls how available time slots are presented to the user. Options include:

• Daily: Displays available time slots grouped by day. This format is ideal for showing a schedule of appointments within a specific day.

• Weekly: Shows available time slots across an entire week. This provides a broader view of availability.

• Monthly: Displays available time slots across the entire month. This view could highlight days with available slots or show a calendar-like representation of the month . This is useful for users who need to see availability across a more extended period.

• Timeline: Visualizes available time slots along a horizontal timeline, making it easy to see the progression of time and available slots.

• Inline: Embeds the time slot picker directly within the page, rather than in a separate popup or dialog. This provides a more integrated user experience.

Setting Time Slot Duration

The Time Slot Duration attribute defines the length of each available time slot. This setting applies to all display formats.

Visible Dates and Times

This section controls which dates and times are visible and selectable in the time slot picker.

• Start Date: Specifies the earliest date that the time slot picker can display.

• End Date: Specifies the latest date that the time slot picker can display.

• Start Time: Specifies the earliest time of day that the time slot picker can display.

• End Time: Specifies the latest time of day that the time slot picker can display.

• Available Date Times: Define specific dates and times available for selection. This allows you to offer appointments or bookings only during particular periods.

• Available Intervals: Define recurring time intervals available for selection (e.g., every weekday from 9:00 AM to 5:00 PM).

• Disabled Date Times: Specify dates and times that are unavailable for selection. This is useful for blocking holidays, personal time, or fully booked slots. VIEW TUTORIAL.

• Disabled Intervals: Define recurring time intervals that are unavailable for selection.

• Show Disabled Dates: Controls whether disabled dates and times are shown in the time slot picker. If enabled, disabled options are typically grayed out or otherwise visually distinguished. If disabled, they are hidden entirely.

Advanced Configuration

Interactions

The Interactions panel allows you to define how the Date Time Picker responds to user actions. The primary interaction is:

• On Change: This trigger activates when a user interacts with the component (e.g., selects a date and time). You can then define the following actions:

  • Validation: Check if the selected date/time meets specific criteria (e.g., not in the past, within business hours).

  • Launch a Flow: Initiate a more complex process, such as creating an appointment record or sending a notification.

  • Display a Message: Provide feedback or instructions to the user based on their selection.

The "On Change" interaction lets you create a dynamic Date Time Picker that guides users and adapts to their choices.

Using Date Time Picker Data in Flows

You can use the Date Time Picker's attributes directly within your flows. For example, you can reference these attributes to set the values of date/time fields when using the "Update Records" element.