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
