Date/Time picker component

[y0hami]

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.