Date Time Picker

A datetime picker is used to select a day and a time.

What the Date Time Picker Component Does

The Date Time Picker component gives you a visual way to choose dates and times, with options to view by day, week, or month. It can handle both one-time and recurring appointments.

You can use the simple built-in appointment object, or for more advanced customization, you can create your appointment logic using Flow Builder

Changing the Properties

Defining a Type

The "Type" property lets you control how users interact with your Date Time Picker:

• Radio Buttons: Users can select only one view at a time (day, week, or month). This is ideal for focusing attention on a specific timeframe.

• Checkboxes: Users can choose multiple views simultaneously (e.g., week and month views). This offers flexibility for seeing appointments across different time scales.

Choosing a Variant

Select the variant that best suits how your users need to see their schedules:

• Daily: Focus on a single day's events with a detailed view.

• Weekly: Get a broader overview of the entire week.

• Monthly: See the big picture with a full-month calendar layout.

• Inline: Embed the picker directly within a page for streamlined input.

• Timeline: Visualize events and appointments along a horizontal timeline.

Set Start Time and End Time

Easily control the initial time range displayed by your Date Time Picker. Here's how:

• Set Start Time: Choose the time your calendar should open by default.

• Set End Time: Indicate the default endpoint of the visible time range.

• Make it Dynamic (Optional): Use the "Mapped" icon to link these times to other data for flexible, automated updates.

Add Disabled Date Time (if needed)

You can set a disabled date time if needed. End-users won't be able to book a disabled date time.

Advanced Options: Customizing Your Date Time Picker

Go beyond the basics with these advanced settings to tailor the Date Time Picker to your exact needs:

Advanced Options Settings information

• Show Disabled Dates:

  • Purpose: Indicates dates users cannot select (e.g., past dates or unavailable time slots).

  • Benefits: Prevents invalid selections and guides users towards valid choices.

• Show End Time:

  • Purpose: Controls whether an end-time input field is displayed alongside the start time.

  • Use Cases: Essential for scheduling appointments or events with defined durations.

• Show Time Zone:

  • Purpose: Displays a time zone selection dropdown.

  • Benefits: Crucial for users scheduling across different time zones.

• Hide Navigation:

  • Purpose: Removes the navigation buttons for switching between days, weeks, or months.

  • Use Cases: When you want to restrict users to a specific timeframe.

• Hide Date Picker:

  • Purpose: Hides the calendar portion, leaving only the time input field(s).

  • Use Cases: When only the time selection matters, not the specific date.

• Hide Label:

  • Purpose: Removes the descriptive label associated with the Date Time Picker.

  • Use Cases: When space is limited, or the component's purpose is self-evident.

• Required:

  • Purpose: Forces the user to provide input before proceeding.

  • Benefits: Ensures essential scheduling information is not omitted.

• Disabled:

  • Purpose: Greys out the component, preventing any user interaction.

  • Use Cases: When the date/time selection should be unavailable based on other logic or conditions.

• Read-only:

  • Purpose: Displays the selected date/time but prevents the user from making changes.

  • Use Cases: For displaying confirmed appointments or displaying information without allowing edits.

Adding Interactions

The Interactions panel lets your Date Time Picker react dynamically to user actions.

Let's break down the key interaction type:

• On Change: This is your trigger. When a user interacts with the component (like selecting a date and time), the "On Change" interaction lets you define what should happen next. Here are some possibilities:

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

  • Launch a Flow: Initiate a more complex process, like creating an appointment record.

  • Display a message: Provide users feedback or instructions based on their selection.

List of all interactions available.

Think of it like this: The "On Change" interaction allows you to build a Date Time Picker that actively guides your users and adapts to their choices.

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

Styling the Date Time Picker

Spacing

• Margin (top, right, bottom, left): Controls the external spacing around the component, creating separation from other elements in your flow.

• Padding (top, right, bottom, left): Controls the internal spacing between the component's edges and content (such as the input field and calendar).

Border

• Size: Sets the thickness of the border surrounding the date time picker.

• Style: Specifies the border's appearance (e.g., solid, dashed, dotted).

• Color: Sets the border's color.

• Radius: Controls how rounded the corners of the component are.

Size

• Width: Controls the horizontal width of the date time picker.

• Height: Controls the vertical height of the date time picker.

• Overflow: Dictates how content is handled if it exceeds the picker's dimensions (options might include 'visible', 'hidden', or 'scroll').

Header

• Background Color: Sets the background color of the header area (which likely contains navigational elements for the calendar).

Label

• Color: Sets the label's text color associated with the date time picker.

• Font Size: Controls the size of the label's text.

• Font Style: Sets the label's text style (e.g., normal, italic).

• Font Weight: Controls the label's text boldness (e.g., normal, bold).

• Horizontal Alignment: Determines the label's horizontal position relative to the input field (e.g., left, center, right).

Examples