Calendar: support month drop-down

[David Schwartz]

The nature of the target date will vary with task. The current Calendar supports the selection of proximate months and years. Some tasks involve the selection of distant months and years. Completing these types of tasks with the current widget would be very cumbersome.

Provide the option to include distant month (1) and year (2) controls.



Selecting the distant month control would result in the display of a list of all twelve months like in the following image.



Selecting the distant year control would result in the display of an optionally scrollable list of years.

[Adam Peller]

see also #6297

[bill]

I'd like to see the implemented somewhere too, as it something I commonly see on sites. But marking as "future" until we get a volunteer to implement it.

Note that there is a calendar class that does some of this in ​http://download.dojotoolkit.org/release-1.2.1/dojo-release-1.2.1/dojox/widget/tests/test_Calendar.html although it's a rather unorthodox UI.

As for location though this should probably go into DojoX Form.

[dante]

nathan toone is the master of all that is dojox.form

[Adam Peller]

ideally, this should be a mixin on dijit._Calendar provided in DojoX.

[Nathan Toone]

This functionality is now provided by dojox.widget.Calendar (and as a textbox in dojox.form.DateTextBox?)

[Adam Peller]

Add month dropdown to dijit._Calendar

year should really be a separate ticket. See also #6570.

[Adam Peller]

First stab at month dropdown list

[Adam Peller]

(In [18748]) Implement month drop-down. Refs #7987 !strict

[Adam Peller]

(In [18750]) position popup on mousedown only. Refs #7987 !strict

[Adam Peller]

(In [18753]) some cleanup suggested by Bill refs #7987 !strict

[Adam Peller]

(In [18758]) one more time: fix connect. refs #7987 !strict

[Adam Peller]

(In [18841]) Add extra div around month dropdown with relative positioning for proper positioning in popups. Still off by a few pixels. Refs #7987 !strict

[bill]

Starting with [18748] dijit/tests/form/robot/DateTextBox.html is failing.

Rollback util/doh directory to [18628] to test what broke in dijit, since DOH changes [18737] and [18819] are also causing problems.

[Adam Peller]

(In [18948]) Add month dropdown robot test. Refs #7987

[Adam Peller]

(In [19068]) Kludge IE8 quirks mode, too. dropdown still does not work in IE6. Refs #7987 !strict

[Adam Peller]

(In [19111]) Redo [19068]: dropdown placement kludge for IE only: quirks mode and IE6. Refs #7987 !strict

[Josh Trutwin]

please add trutwijd to CC - thanks!

[Adam Peller]

(In [20044]) reduce a bit of css. Refs #7987

[Adam Peller]

Two issues here. Distant year selection logged as separate ticket: #10002

[David Schwartz]

I've got a usability concern re this design. As currently designed, it's likely that part of the list will be clipped (see the attached video). This problem is exacerbated by the list not extending beyond the client area of the page (see the 2nd video that illustrates native controls doing just that). I think it would be better to present the full list below the current value rather than making the current value part of the list. In this way, the month list wouldn't extend much beyond the datetextbox itself (if at all).

[David Schwartz]

Illustrates the month list getting clipped by the client area border

[David Schwartz]

Native select control behavior

[Adam Peller]

This is a known limitation of the current design. I don't like the alternative, since clicking would instantly change the selection. You could still end up with clipping problems, just not as much getting clipped.

[Adam Peller]

I see, you could put it below so that a click+release would have no action, but I don't like the look of that and you still have a clipping problem, just at the bottom

[bill]

There shouldn't be any clipping problem if implemented as a standard dijit drop down (using dijit.popup()), as the list will appear either below or above depending on where there is space.

See for example how the ​http://download.dojotoolkit.org/release-1.3.2/dojo-release-1.3.2/dojox/form/tests/test_DropDownSelect.html Select widget works if you make your browser window small enough.

[David Schwartz]

I like it!

[bill]

I split off the positioning problem into #10091 so we can close this ticket.