Date and Time Fields have not been defined for the Design System yet; however, general best practices for this element have already been outlined below.
Date and Time
Description
Date and time fields are input elements that enable users to select or enter specific dates, times, or both, depending on the context. These fields often include a calendar or time picker interface for easier selection, while also supporting manual input for flexibility.
Use Cases
Use date, time, or combined date-time fields for inputs such as:
- Scheduling appointments, tasks, or reminders
- Selecting deadlines, booking dates, or birthdates
- Entering precise event times
Usage
Input Types:
- Date only:
<input type="date"> - Time only:
<input type="time"> - Date & Time:
<input type="datetime-local">
Labels and Accessibility: Use clear, descriptive <label for="...">Text</label>. Make sure that screen readers are supported.
Data Format:
- MM/DD/YYYY for US
- DD/MM/YYYY for EU
Time Format:
- 12-hour with AM/PM (US)
- 24-hour (international)
Date-Time Format: ISO 8601 (YYYY-MM-DDTHH:MM) for datetime-local
Time Zones: Auto-detect via browser/geolocation when possible. Display or allow manual selection with a dropdown if necessary. Indicate clearly near the input.
Defaults and Pre-Filled Values: Pre-fill logical defaults to improve speed and ease of use, such as Current date/time for scheduling, Business hours for appointments, Next available slot for bookings. Ensure defaults are easy to override.
Ranges and Validation: Use min and max attributes to restrict valid dates or times. For combined date-time inputs, dynamically adjust time availability based on selected date. Disable invalid or out-of-range options visually and functionally.
Calender & Pick UI:
- Use a visual calendar to reduce input errors.
- Highlight today’s date.
- Enable fast navigation (month/year)
- Include clear action buttons like “Apply” or “OK
Efficiency:
- Presets for frequent selections: "Today", "Tomorrow at 9 AM", "Next Week", etc.
- Date ranges: Provide buttons like “Last 7 Days” or “This Month”.
- Step attribute: Allow predefined intervals (e.g., every 15 mins).
Keyboard Support: Ensure full keyboard accessibility. Tab should focus fields, arrow keys should be able to be used for navigation, enter should confirm selection. Allow full keyboard entry and auto-formatting of inputs if possible.