Opened 11 years ago

Closed 10 years ago

#7987 closed enhancement (fixed)

Calendar: support month drop-down

Reported by: David Schwartz Owned by: Adam Peller
Priority: high Milestone: 1.4
Component: Dijit Version: 1.2.0
Keywords: ibm date distant-values Cc: Josh Trutwin
Blocked By: Blocking:

Description (last modified by Adam Peller)

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.

Attachments (5)

date-non-proximal-selection.gif (12.4 KB) - added by David Schwartz 11 years ago.
notes-distant-month-selector.gif (7.9 KB) - added by David Schwartz 11 years ago.
calendar-ddl.patch (5.7 KB) - added by Adam Peller 10 years ago.
First stab at month dropdown list
datetextbox.selecting.distant.gif (26.1 KB) - added by David Schwartz 10 years ago.
Illustrates the month list getting clipped by the client area border
select.window.gif (19.5 KB) - added by David Schwartz 10 years ago.
Native select control behavior

Download all attachments as: .zip

Change History (33)

Changed 11 years ago by David Schwartz

Changed 11 years ago by David Schwartz

comment:1 Changed 11 years ago by Adam Peller

see also #6297

comment:2 Changed 11 years ago by bill

Component: Dijit - LnFDojoX Form
Milestone: tbdfuture
Owner: set to dante
Type: defecttask

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.

comment:3 Changed 11 years ago by dante

Owner: changed from dante to Nathan Toone

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

comment:4 Changed 10 years ago by Adam Peller

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

comment:5 Changed 10 years ago by Nathan Toone

Resolution: fixed
Status: newclosed

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

comment:6 Changed 10 years ago by Nathan Toone

Milestone: future1.4

comment:7 Changed 10 years ago by Adam Peller

Component: DojoX FormDijit
Resolution: fixed
Status: closedreopened

comment:8 Changed 10 years ago by Adam Peller

Owner: changed from Nathan Toone to Adam Peller
Status: reopenednew

Add month dropdown to dijit._Calendar

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

Changed 10 years ago by Adam Peller

Attachment: calendar-ddl.patch added

First stab at month dropdown list

comment:9 Changed 10 years ago by Adam Peller

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

comment:10 Changed 10 years ago by Adam Peller

Type: taskenhancement

comment:11 Changed 10 years ago by Adam Peller

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

comment:12 Changed 10 years ago by Adam Peller

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

comment:13 Changed 10 years ago by Adam Peller

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

comment:14 Changed 10 years ago by 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

comment:15 Changed 10 years ago by 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.

comment:16 Changed 10 years ago by Adam Peller

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

comment:17 Changed 10 years ago by Adam Peller

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

comment:18 Changed 10 years ago by Adam Peller

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

comment:19 Changed 10 years ago by Josh Trutwin

please add trutwijd to CC - thanks!

comment:20 Changed 10 years ago by Nathan Toone

Cc: Josh Trutwin added

comment:21 Changed 10 years ago by Adam Peller

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

comment:22 Changed 10 years ago by Adam Peller

Description: modified (diff)
Resolution: fixed
Status: newclosed
Summary: DateTextBox: Support Selection of Distant Months/YearsCalendar: Support Selection of Distant Months

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

comment:23 Changed 10 years ago by David Schwartz

Resolution: fixed
Status: closedreopened

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).

Changed 10 years ago by David Schwartz

Illustrates the month list getting clipped by the client area border

Changed 10 years ago by David Schwartz

Attachment: select.window.gif added

Native select control behavior

comment:24 Changed 10 years ago by 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.

comment:25 Changed 10 years ago by 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

comment:26 Changed 10 years ago by 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.

comment:27 Changed 10 years ago by David Schwartz

I like it!

comment:28 Changed 10 years ago by bill

Resolution: fixed
Status: reopenedclosed
Summary: Calendar: Support Selection of Distant MonthsCalendar: support month drop-down

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

Note: See TracTickets for help on using tickets.