Home / Designing UI Elements

Date and Time

Tech Writers Team @ Ucraft

Last updated on Sep 10, 2024

The Date and Time UI element allows users to input or select specific dates and times, or both while booking a product, scheduling an event, selecting delivery time, etc.

To configure Date and Time:

  1. Select the current condition of the element from the State dropdown on the right-side Properly Panel:
  • Normal: The default state of Date and Time when it is not being interacted.
  • Hover: The state of Date and Time when the user hovers over it with the mouse cursor.

2. Select how it behaves based on certain conditions or user interactions from the Mode dropdown:

  • Normal: The default state of Date and Time when it is not being interacted.
  • Error: The state of Date and Time when the users' input does not meet the specified criteria, such as an incorrect date format, an out-of-range date or time, or other inconsistencies.

3. Select how Date and Time are displayed from the Type dropdown: only the input field, input field with left or right icon.

4. Make the necessary configuration of principal styling features (see Global Styles).

 

💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.