Today, I implemented the jQuery UI Datepicker in an application where the requirements state that the current date should always be null. That is, if the user opens a Datepicker after first having selected or typed in a date, the Datepicker should still be “centered” around today’s date with no pre-selected date.

It might just be me, but I was not able to find a way to do this by simply using the Datepicker options. I therefore ended up solving it by creating an invisible text field to which the given Datepicker is associated. In addition, an onClose callback function ensures that the value of this field is always re-set to null while the selected date is moved into the field to be read on the server side.

Using the same kind of HTML structure as listed in Replacing the Built-In DatePicker in Sun IdM 8.0, I ended up with JavaScript similar to the code listed below.

$(document).ready( function() {
	/**
	 * If the user actively selected a date, insert that date into
	 * the text field and reset the datepicker's value as this should
	 * always display the current date (CIMS req.).
	 */
	var updateDatePicker = function(date, datepicker) {
		if( date != null ) {
			var $dateHolderElm = datepicker.input;
			var dateFieldId = $dateHolderElm.attr('dateFieldId');
			$('#' + dateFieldId).val(date.format(dateFormat.masks.isoDate));
			$dateHolderElm.val('');
		}
	};
	$('div.datepicker.enabled').each( function() {
		// Create a new element that will act as the datepicker
		// for this field. Because we want the datepicker to always
		// open on the current day instead of the selected date,
		// we bind it to an invisible input element through a new
		// button element's onclick event handler.
		var dateFieldId    = $('.date', this).attr('id');
		var dateHolderId   = dateFieldId + "_dateholder";
		var $dateHolderElm = $('<input type="text" id="' + dateHolderId + '" value="" />');
		$dateHolderElm.attr('dateFieldId', dateFieldId);
		var $buttonElm = $('<button><img src="images/calendar.png" alt="Open calendar" /></button>');
		$buttonElm.insertAfter($('.date', this));
		// Make the dateholder invisible, but do not set display to none
		$dateHolderElm.css( {
			//visibility: 'hidden', // breaks in IE, so .. the rest is based on site design, but should be part of CSS
			border: 0,
			color:  'white',
			backgroundColor: 'white',
			zIndex: -1,
			position: 'relative',
			marginLeft: '-3px',
			marginTop: '-10px',
			height: 0,
			width:  0
		});
		$($dateHolderElm).insertBefore($buttonElm); // to ensure placement of dp
		$buttonElm.click( function() {
			$dateHolderElm.trigger('focus');
			return false;
		});
		$dateHolderElm.datepicker({
			onClose : updateDatePicker
		});
	});
});

Note: for formatting of JavaScript dates, I’ve used date.format.js from stevenlevithan.com.