Projects/Usability/HIG/Date Time Pickers: Difference between revisions

    From KDE TechBase
    < Projects‎ | Usability‎ | HIG
    (New page: == Date and Time == '''Date / Time Widget:''' Use the KDE Date/Time Widget ''' Start and End Date/Time:''' When users are to set a start and end date/time, make the default end date/tim...)
     
    (11 intermediate revisions by 5 users not shown)
    Line 1: Line 1:
    == Date and Time ==
    __NOTOC__


    '''Date / Time Widget:'''
    == Purpose ==
    Use the KDE Date/Time Widget
    The ''date/time picker'' is a control that provides a convenient way to select a certain date 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. The benefit of date/time picker is that these controls prevent format error and provide feedback on wrong input.
     
    ''' Start and End Date/Time:'''
    [[file:Date_Time_Pickers.png]]
    When users are to set a start and end date/time, make the default end date/time aware of the start date/time.
     
    == Guidelines ==
    That is when the user sets a start date, switch the end date at least to the same date.
    * Use a date/time picker as a convenient way to select a certain day or time.
    ** In situations where users enter a date that they already know for certain (e.g. their birthday), use a KDateWidget.
    ** If they want to enter a date and time they already know exactly, use a KDateTimeWidget.
    ** If users want to choose a date and time using the application (e.g. while scheduling an appointment or choosing a date for a vacation), use the KDatePicker or KDateComboBox (depending on the amount of space available) and KTimeComboBox or KTimeComboBox.
    ** If users want to browse through dates (for example when viewing a calendar or browsing a history based on the date), use a KDatePicker for convenient switching with a single click."
    * 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.
    * Insert current time or date into into input field on user reset.
     
    == Implementation ==
    === Time-only controls ===
    * [http://api.kde.org/4.10-api/kdelibs-apidocs/kdeui/html/classKTimeComboBox.html KTimeComboBox]
     
    === Date-only controls ===
    * [http://api.kde.org/4.10-api/kdelibs-apidocs/kdeui/html/classKDateComboBox.html KDateComboBox]
    * [http://api.kde.org/4.10-api/kdelibs-apidocs/kdeui/html/classKDatePicker.html KDatePicker]
    * [http://api.kde.org/4.10-api/kdelibs-apidocs/kdeui/html/classKDateTable.html KDateTable]
    * [http://api.kde.org/4.10-api/kdelibs-apidocs/kdeui/html/classKDateWidget.html KDateWidget]
     
    === Date-time controls ===
    * [http://api.kde.org/4.10-api/kdelibs-apidocs/kdeui/html/classKDateTimeEdit.html KDateTimeEdit]
    * [http://api.kde.org/4.10-api/kdelibs-apidocs/kdeui/html/classKDateTimeWidget.html KDateTimeWidget]

    Revision as of 11:19, 4 July 2013


    Purpose

    The date/time picker is a control that provides a convenient way to select a certain date 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. The benefit of date/time picker is that these controls prevent format error and provide feedback on wrong input.

    Guidelines

    • Use a date/time picker as a convenient way to select a certain day or time.
      • In situations where users enter a date that they already know for certain (e.g. their birthday), use a KDateWidget.
      • If they want to enter a date and time they already know exactly, use a KDateTimeWidget.
      • If users want to choose a date and time using the application (e.g. while scheduling an appointment or choosing a date for a vacation), use the KDatePicker or KDateComboBox (depending on the amount of space available) and KTimeComboBox or KTimeComboBox.
      • If users want to browse through dates (for example when viewing a calendar or browsing a history based on the date), use a KDatePicker for convenient switching with a single click."
    • 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.
    • Insert current time or date into into input field on user reset.

    Implementation

    Time-only controls

    Date-only controls

    Date-time controls