Date time input

The "Date time input" component allows users to choose a specific date and time from a calendar to enter a value.

This component is useful when your users want to filter the data view on the page for a specific date or when you need to collect date and time information from users, such as scheduling appointments or setting deadlines.


Specify the column in the data table where user interaction data will be saved.

This setting is exclusive to the detail page and ensures seamless integration between the component and the linked data table.

Label & Icon

Provide a descriptive label to indicate the purpose or significance of the Date Time Input component. You can also choose an icon that visually represents the concept of date and time.

Default Value

Set a default value for the Date Time Input component, which will be pre-populated when the page is loaded. This can be beneficial when you want to provide a predefined date and time or when you want to suggest a default selection to users.

Input Type

Choose between "Date & Time" or "Date Only."

  • The "Date & Time" option allows users to select a date and a specific time.

  • The "Date Only" option allows users to choose a date without specifying a specific time.


Choose whether to hide the component from the view of the app users. This can be useful in cases where the date & time input component is not relevant in some special cases or events or needs to be hidden for security reasons.


Figure users' ability to modify date and time data using the component.

You may consider whether or not disabling the ability to interact with a component in many cases. For instance, you may showcase information in read-only mode, prevent accidental changes to critical data, or disable the component until users go through several steps.


Name the component for use with the Typescript.


Interaction settings

You can empower the 'Date time input" component and enhance the user experience by specifying the component's behavior when a user selects a date or time value and saves it as an update.

You can choose one from a wide range of supported actions, such as updating your table or sending a notification on the interaction.

Explore all the available types of actions and find detailed instructions on their configuration:

pageItem action

Last updated