jquery.datePicker example: disabling the datePicker

< date picker home

The following example shows you how you can disable the date picker by calling dpSetDisabled on the relevant element. This disables the related input field (if there is one) and adds a class of dp-disabled to the date picker element and it's button (if there is an associated button)

Disable date 1 or Disable date 2

Test date picker form

Page sourcecode

 $(function()
{
	$('.date-pick').datePicker();
	$('.dp-disable').bind(
		'click',
		function()
		{
			var $this = $(this);
			var whichInput = $this.attr('rel');
			var $dateInput = $('#date' + whichInput);
			var status = $dateInput.is('.dp-disabled');
			$dateInput.dpSetDisabled(!status);
			$this.text(
				(status ?
					'Disable' :
					'Enable'
				) + ' date ' + whichInput);
			this.blur();
			return false;
		}
	);
});

Page CSS

/* located in demo.css and creates a little calendar icon
 * instead of a text link for "Choose date"
 */
a.dp-choose-date {
	float: left;
	width: 16px;
	height: 16px;
	padding: 0;
	margin: 5px 3px 0;
	display: block;
	text-indent: -2000px;
	overflow: hidden;
	background: url(calendar.png) no-repeat; 
}
a.dp-choose-date.dp-disabled {
	background-position: 0 -20px;
	cursor: default;
}
/* makes the input field shorter once the date picker code
 * has run (to allow space for the calendar icon
 */
input.dp-applied {
	width: 140px;
	float: left;
}