Difference between revisions of "Projects/Usability/HIG/Date Time Pickers"

< Projects‎ | Usability‎ | HIG
Jump to: navigation, search
(Add new screenshot and list of implementation classes)
Line 1: Line 1:
 +
__NOTOC__
 +
 
== Purpose ==
 
== Purpose ==
 
+
The ''date/time picker'' is a control that provides a convenient way to select a certain day or time. The time picker works just like a [[Projects/Usability/HIG/Spin_Box| spin box]] with an adopted mask. The date picker shows all days of a month in weekly columns, has small navigation buttons to access previous and next month or years as well as interactive controls to chose month and year directly. The user 'picks' the date per single click on a particular day. An additional 'today' button can be used to navigate back.
Date time pickers allows the user to type or pick a date, a time, or both.
+
  
 
[[file:Date_Time_Pickers.png]]
 
[[file:Date_Time_Pickers.png]]
  
 
== Guidelines ==
 
== Guidelines ==
 
+
* Use a date/time picker as a convenient way to select a certain day or time.
* When selecting a date, if space is limited, use a KDateComboBox or a KDateWidget. If more room is available, use a KDatePicker.
+
* When selecting a date use a KDatePicker. If space is limited, use a KDateComboBox or a KDateWidget.
 +
* Allow direct input at the input field (e.g. to copy/paste values).
 
* When user must select both start and end date/times, make the default end date/time aware of the start date/time: when the user sets a start date, switch the end date at least to the same date.
 
* When user must select both start and end date/times, make the default end date/time aware of the start date/time: when the user sets a start date, switch the end date at least to the same date.
 +
* Avoid wrong input by restricting the period to a reasonable range (for instance when a range is being selected).
 +
* Do not modify localization settings (i.e. first day of week, date label etc.)
 +
* Use controls consistently; either all date input should be done by date picker or none.
 +
* Consider to replace the time picker by a drop down list with fixed periods.
 +
* Insert current time or date into into input field on user reset.
 +
* If picker is used as popup close it on selection.
  
 
== Implementation ==
 
== Implementation ==

Revision as of 16:12, 1 July 2013


Purpose

The date/time picker is a control that provides a convenient way to select a certain day or time. The time picker works just like a spin box with an adopted mask. The date picker shows all days of a month in weekly columns, has small navigation buttons to access previous and next month or years as well as interactive controls to chose month and year directly. The user 'picks' the date per single click on a particular day. An additional 'today' button can be used to navigate back.

Date Time Pickers.png

Guidelines

  • Use a date/time picker as a convenient way to select a certain day or time.
  • When selecting a date use a KDatePicker. If space is limited, use a KDateComboBox or a KDateWidget.
  • Allow direct input at the input field (e.g. to copy/paste values).
  • When user must select both start and end date/times, make the default end date/time aware of the start date/time: when the user sets a start date, switch the end date at least to the same date.
  • Avoid wrong input by restricting the period to a reasonable range (for instance when a range is being selected).
  • Do not modify localization settings (i.e. first day of week, date label etc.)
  • Use controls consistently; either all date input should be done by date picker or none.
  • Consider to replace the time picker by a drop down list with fixed periods.
  • Insert current time or date into into input field on user reset.
  • If picker is used as popup close it on selection.

Implementation

Time-only controls

Date-only controls

Date-time controls


KDE® and the K Desktop Environment® logo are registered trademarks of KDE e.V.Legal