Opened 12 years ago

Closed 9 years ago

Last modified 9 years ago

#5151 closed enhancement (fixed)

DateTextBox: Icon to control drop down display

Reported by: guest Owned by: bill
Priority: high Milestone: 1.6
Component: Dijit - Form Version: 0.9
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by bill)

DateTextBox and TimeTextBox widgets should have an option that lets us configure whether we want the calendar to open onfocus or by displaying a little calendar icon maybe, next to the field.

Its very annoying for the user to tab through the fields and have calendars open when the focus is on a field, they are just switching to the next field, not changing the date.

Change History (18)

comment:1 Changed 12 years ago by bill

Annoying is a matter of opinion, but this is by design and mimics sites like http://www.expedia.com, http://travel.yahoo.com/.

comment:2 Changed 12 years ago by guest

I see what you mean, I have seen those sites do it that way.

But in a form where we have more than 2 date fields and the user is pressing tab to go to the next fields, it gets kind of slow to render the calendar (since they keep the tab button pressed).

If we had the option to have a little icon next to the field then the user could choose when to see the calendar.

comment:3 Changed 12 years ago by bill

Milestone: 2.0
Summary: Icon to select date for DateTextBoxDateTextBox: Icon to control drop down display

I'll mark this for consideration for 2.0 for now. Generally dijit doesn't provide options like this unless a lot of people demand then; we'll see how others feel.

comment:4 Changed 12 years ago by alex

Milestone: 2.01.3

Milestone 2.0 deleted

comment:6 Changed 11 years ago by bill

Description: modified (diff)

comment:7 Changed 11 years ago by bill

See also #7287.

comment:8 Changed 11 years ago by David Schwartz

This isn't an issue with DateTextBox? and TimeTextBox? widgets per se but, rather, with any control that's used as an editor with an InlineEditBox?.

Also, the client should be able to provide an icon to use in the field-level button.

comment:9 Changed 11 years ago by bill

It's an issue w/any form widget w/a drop down. Currently that's just DateTextBox and TimeTextBox.

There's no relation to InlineEditBox per se except that this change increases the number of clicks/keystrokes needed to change an InlineEditBox value. For example, a user clicks the InlineEditBox? and an <input> + icon is shown, then clicks the icon and a calendar is shown, then clicks a day, then clicks on a white area of the screen and the edit ends.

Arguably, the first click should display the calendar, and clicking a day should end the edit.

comment:10 Changed 11 years ago by bill

Milestone: 1.31.4

bumping 1.4 tickets to 1.5, and most 1.3 tickets to 1.4

comment:11 Changed 10 years ago by bill

I was going to start working on this, but I realized that #9356 should be done first.

After that I think I want to create a subclass of _HasDropDown called DropDownTextBox (or similar), since DateTextBox/TimeTextBox will now be sharing the same template as ComboBox/FilteringSelect (an input arrow and a drop down button).

comment:12 Changed 10 years ago by Douglas Hays

Owner: set to bill

comment:13 Changed 10 years ago by bill

Milestone: 1.41.5

comment:14 Changed 10 years ago by bill

Milestone: 1.51.6

comment:15 Changed 9 years ago by bill

Resolution: fixed
Status: newclosed

(In [22555]) Convert _DateTimeTextBox to extend _HasDropDown, so it gets an icon (down arrow button) to open the drop down. The icon's display is controlled by a hasDownArrow parameter, same as ComboBox.

Tabbing into the widget no longer causes the drop down to (automatically) open. Clicking the field causes the drop to open, although that behavior can be disabled by setting the new "openOnClick" parameter to false. Of course, clicking the down arrow button (if it's displayed) will always open the drop down.

Changed _HasDropDown to not expect the drop down widget (this.dropDown) to exist initially, prior to the user clicking the down arrow, as DateTextBox creates it on demand. Also fixed the connections for the key handlers, which should clearly be on this.focusNode rather than this._buttonNode.

Had to modify _TimePicker some because the handleKey() callback from _HasDropDown is being called on keyup rather than keypress like before, so evt.charOrCode isn't set. Maybe _HasDropDown should be monitoring keypress rather than keyup.

Made a new DropDownBox.html template used for DateTextBox/TimeTextBox, and expected to be used for ComboBox/FilteringSelect once I get those converted to extend _HasDropDown.

Open issues include:

  • confirm aria roles are correct
  • mouseover of the fields in the _TimePicker no longer makes them expand in width
  • TimeTextBox needs more tests

Fixes #5151, refs #9945 !strict.

comment:16 Changed 9 years ago by Adam Peller

Is it possible to make the dropdown icon a calendar icon? I personally don't like it, but a lot of people will ask. Would this be something done through css/theming?

comment:17 Changed 9 years ago by bill

Yes, it's possible to make the icon anything you want. That's up to the theme.

comment:18 Changed 9 years ago by bill

Component: DijitDijit - Form
Note: See TracTickets for help on using tickets.