[whatwg] Input type=date UI discussion

[Mikko Rantalainen]

Brian Wilson wrote:
> Some possible user interface realizations (draft) of the date widget:
> Input type=date popup:
>     http://people.opera.com/brian/testfiles/input-date-popup.png

I'd reverse the month and year input elements.

> - Year numbers, Month labels and day numbers should be localized strings.

> - If a value attribute is present, and valid, when the popup is invoked,  
> the year/month/day indicated will all be pre-set. The year field will have  
> initial focus.

Please, if you want to put focus to year first, put that element as 
first in the popup. If we take the draft screenshot above and go to 
year first, it's unintuitive to go leftwards once the user hits TAB.

> - Display format for the field does not match submittal format...what  
> should it be?

According to user's localization information. For UNIX, this would 
be the locale pointed by environment variable LC_TIME (unless 
overridden by LC_ALL). I think the "C" locale should match ISO-8601 
format.

> - Should the left-most day of the week be Sunday or Monday? Is this a  
> localization issue?

It's a localization issue. I think it's Monday for everything else 
but en_US. Standard ISO week starts at Monday.

> - Possible addition: Two additional function buttons not mentioned in the  
> WF2 specification could aid usability:
> "Current" (set the date to the current date), and "Reset" (reset the date  
> to the field's value before popup was invoked).

I'd relabel "Current" to "Today". "Current" sounds like "OK" to me 
(set input date value to currently selected value).

I think that the "Today" button has no use if there's some default 
value. I'd use following buttons:

[Reset/Today] [Cancel] [OK] (reverse Cancel and OK if required by 
platform guidelines for confirm and cancel actions). If default 
value is not set, there should be "Today" button. If default value 
is set, the "Today" button should be replaced with "Reset".

> 4.1 Pointing Device Actions
>    - Clicking anywhere on the widget generates the date chooser popup.

OK

>    - Clicking outside the calendar popup dismisses the popup and uses the  
> current values in the popup as the new date value.

This isn't good. How do I cancel? At least, put "OK" and "Cancel" 
buttons in the popup.

>    - If the date selected in the popup is not valid according to the  
> field's constraints, the value will revert to the last valid value.

So, if I select a day outside valid range, the value will be 
silently changed (that is, unless I check the text in input after 
the popup went away). Not good.

> 4.2 Key actions
>    - The widget display is read-only. Except for the listed key behaviors  
> below, the widget is unresponsive to key input.
>    - TAB moves focus to and from the date widget. Focus is received from  
> previous element in the tabindex order (or the previous focusable element  
> in the document order.) Focus is sent to the next focusable element in the  
> tabindex order (or the next focusable element in the document order).
>    - ENTER: Invokes the date chooser popup

ENTER submits the form in most input elements. If the date input 
element looks like a button and it has focus ring, I think using 
ENTER to activate the popup is OK. If it looks like a text input or 
drop down list, then ENTER should submit the form instead (assuming, 
of course, that ENTER submits in normal text input in this UA).

>    - DOWN arrow: Invokes the date chooser popup
>    - Key actions within the date chooser popup
>      - Popup initial focus: Year field.
>      - TAB key dismisses the popup and moves focus to the next element in  
> tabindex or document order
>      - CTRL-TAB key moves between yr/month/day regions of the popup, in  
> that order
>      - ESC key dismisses the popup and reverts the value to the value it  
> had before popup invocation.

Yeah, here's the CANCEL action I was looking before! I assume that 
ESC hits the invisible Cancel button?

>      - ENTER key dismisses the popup using the current date settings.

Again, the ENTER key activates the invisible default OK button. Not 
good.

>      - Year has focus: UP/DOWN = next/previous year. LEFT/RIGHT = no effect
>      - Month has focus: UP/DOWN = next/previous month. LEFT/RIGHT = no  
> effect
>      - Day has focus: RIGHT/LEFT/UP/DOWN = navigate on day grid
>      - Ex. Case: Month field has focus, value=December, UP key= increase  
> year by 1, set month to Jan, set day focus to 1. Month field still has  
> focus
>      - Ex. Case: Month field has focus, value=July, Day=31, UP key=  
> increase month field by 1 (August), set day field to 1st.

Please, make it possible to enter a date with following key 
combination. E.g. for today enter
2005-07-13
That is, once the popup has been opened, the focus is in year by 
default. I input "2005" to set the year, press "-" to change to next 
field (the "-" isn't a valid input for this field so it can be used 
to change to next field in addition to TAB key. Apply the same logic 
for characters [.:/,]. Repeat for month and day. Notice that I 
should be able to type in day number even though the display is 
grid-like. (Compare to Mozilla's drop-down lists where I can type 
more than one letter to skip to an item even though my keyed input 
is displayed nowhere - it could be displayed in status bar...)

-- 
Mikko