This adds an option to change the date picker button to a toggle. (Not quite as simple as trigger.toggle, since you have to allow for outside clicks, but close.) I'd actually argue for making this the default behavior.

[www]jquery$ diff -u3 ui.datepicker.old.js ui.datepicker.js

--- ui.datepicker.old.js Wed Jan 30 11:04:11 2008

+++ ui.datepicker.js Wed Jan 30 15:26:40 2008

@@ -60,6 +60,7 @@

buttonText: '...', Text for trigger button

buttonImage: '', URL for trigger button image

buttonImageOnly: false, True if the image appears alone, false if it appears on a button

+ hideOnButton: false, True if clicking the button again closes the calendar

closeAtTop: true, // True to have the clear/close at the top,

false to have them at the bottom

mandatory: false, True to hide the Clear link, false to include it

@@ -199,6 +200,7 @@

var buttonText = inst._get('buttonText');

var buttonImage = inst._get('buttonImage');

var buttonImageOnly = inst._get('buttonImageOnly');

+ var hideOnButton = inst._get('hideOnButton');

var trigger = $(buttonImageOnly ? '<img class="datepicker_trigger" src="' +

buttonImage + '" alt="' + buttonText + '" title="' + buttonText + '"/>' :

'<button type="button" class="datepicker_trigger">' + (buttonImage != '' ?

@@ -211,7 +213,17 @@

else {

input.after(trigger);

}

• trigger.click(this.showFor);

+ if (hideOnButton) {

+ trigger.click(function() {

+ if ($.datepicker._datepickerShowing) {

+ $.datepicker.hideDatepicker();

+ } else {

+ $.datepicker.showFor(input);

+ }

+ });

+ } else {

+ trigger.click(this.showFor);

+ }

}

input.addClass(this.markerClassName).keydown(this._doKeyDown).keypress(this._doKeyPress);

input[0]._calId = inst._id;