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.
Last updated
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.
Last updated
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.
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.
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.
You can set a disabled date time if needed. End-users won't be able to book a disabled date time.
Go beyond the basics with these advanced settings to tailor the Date Time Picker to your exact needs:
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.
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).