Date/Time picker component #7
Description
Usage
Bootstrap bootstrap-datetimepicker
Material UI Picker
Carbon Design System (IBM) Date Picker
Lightning Design System (Salesforce) Date Picker
Atlassian Datetime picker
Fomantic-UI Calendar
Purpose
Date/Time pickers are used to select a date, time or both instead of inputting into a text box with different formats across websites.
Date picker
All the date pickers look mostly the same. A simple popup with a list of all the days of the month with arrows to go back and forth through the months. Clicking on the month name at the top shows a list of months which allows the user to quickly jump to a specific month same goes for the year.
Time Picker
Looking at Atlassian and Fomantic they both have "dropdown" like for the time picker which is quick but requires the user to search for their time. Bootstrap time picker is easy to use but takes time to input the exact time. The material design time picker is formatted like a clock so a user is familiar with its appearance and can easily select the time with a few clicks.
Datetime picker
The datetime picker should show the date picker and then show the time picker once a date is selected. Both popups shouldn't be different from the individual version to minimise confusion.
Features
A list of a few features most frameworks have in common
Date picker
- Min/max selectable date
- Select a range of dates
- Disable specific years, months and days (and ranges)
- Show week numbers
- Change date format
Time picker
- Min/max selectable time
- Select a range of time
- Disable specific times (and ranges)
- Select AM/PM (unless is using 24 hour format)
- Change time format
Naming
Most frameworks/plugins call these datetime pickers but Material UI calls them "Pickers", which makes the most sense since it can be a date, time or datetime picker.