JQuery DatePicker Tweaks

7/25/2009

The JQuery UI DatePicker plugin's default behavior had two aspects I didn't like:

When you mouse over the calendar icon, the cursor style doesn't change from default. I thought it should change to a Hand to indicate a clickable element.
The Today button on the Date Picker wasn't intuitive to me. In case you're wondering what it does: If you move the calendar to some month in the past or future, hitting the Today button will bring it back to the current date. (Go ahead and bring up the first datepicker dialog and see for yourself.) I decided to just get rid of it.

Date Picker with default behavior:

Date:

Date Picker with my customizations: Pointer, (hand), cursor and the Today button is gone.

Date:

Pointer Cursor for the Calendar Image

To get a pointer cursor while hovering over the calendar image, I'd need to select the image element and give it a mouseover event to change the cursor style. But how to select the calendar image? I knew the value of the src attribute for the calendar image because it's part of the DatePicker initialization; the buttonImage option, buttonImage: '../images/calendar.gif'. Here's the code :

The DatePicker input tag

<input type='text' id='datepickerCustom'>

The initialization call

$('#datepickerCustom').datepicker({
	numberOfMonths: 1,
	duration: '',
	closeText: 'Close',
	showOn: 'button', 
	buttonImage: '../images/calendar.gif', 
	buttonText: 'Choose',
	buttonImageOnly: true,
	showButtonPanel: true
});

The Mouseover Event

$("img[src$='calendar.gif']").mouseover(function() {
		$(this).css('cursor','pointer');
	});

For fun and to see for sure what I was dealing with, I used IE8's Developer Tools to get a look at the HTML generated by the plugin. I drilled down to the image tag to verify that I did indeed have an <img> to work with and found this:

<img title="Choose" class="ui-datepicker-trigger" style="border-bottom: medium none; border-left: medium none; margin-top: 0px; margin-bottom: 0px; border-top: medium none; cursor: pointer; margin-right: 0px; border-right: medium none;" alt="Choose" src="../images/calendar.gif" complete="complete" jQuery1249341187436="5"/>

There was my image tag with the expected src attribute, but wait! The image element also had a class name, ui-datepicker-trigger, that looked like it could be specific to the image only, so I tried that as a way to select the img too, which worked, (nothing else seemed to break):

$(".ui-datepicker-trigger").mouseover(function() {
		$(this).css('cursor','pointer');
	});

Since this web page you're reading right now has two DatePickers on it and I only wanted to apply the change to one of them, I used the first idea: the image file name in the selector. To make it work, I renamed copy of the calendar.gif image to calendarVanilla.gif and used it for the DatePicker with default behavior. That way I could distinguish between the two Date Pickers using the $("img[src$='calendar.gif']") selector. ICYDK, this selector uses an attribulte filter to find an image element with a src attribute that ends with 'calendar.gif'. I'm fairly new to JQuery, not to mention css, javascript and the DOM, so there may be a better way to distinguish between the two images but this is what I came up with.

Eliminating the Today Button

For this next customization, I'd need some css to select the Today button on the DatePicker dialog and add styling to hide it. To determine how to select the button I jumped right into IE8's Developer Tools to see what I could find. I brought up the DatePicker, hit F12, looked at the page's html that was generated by the plugin and found this:

<button class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all" onclick="DP_jQuery.datepicker._gotoToday('#datepickerCustom');" type="button"jQuery1249318660608="334">

The class name ui-datepicker-current looked like it might be useful for selecting the button but I wanted to make sure the ui-datepicker-current class was specific to the Today button. I searched all the relevant JQuery files and the class was referenced in both ui.datepicker.js and ui.datepicker.css, but only in the context of the button, so I was in luck. Here's the styling css code I came up with:

.ui-datepicker-current {
	visibility:hidden
}

It worked. No more Today button.

Multiple Date Pickers Behaving Differently

If you view source for this page you'll see that this isn't the way things are working here. The problem I ran into was that there are two DatePickers on the page and I needed to figure out how to select the Today button of just one of them; (.ui-datepicker-current selects all datepickers on the page.)

Here's how I named my two date pickers:

If you refer back up to the html source for the button tag, you'll see that it's onclick attribute is this:

onclick="DP_jQuery.datepicker._gotoToday('#datepickerCustom').

There's my custom datepicker id. So, using an attribute selector, I was able to zero in on my custom datepicker:

button[onclick*='datepickerCustom'] {
		visibility:hidden
	}

A final thought. I also tried to make my customizations by tweaking the javascript code in the file, ui.datepicker.js. I was successful, but it's a good idea to stay away from making changes to the script becuse then you'll have to maintain your changes if you update your date picker to a newer version.