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
$(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; } ); });
/* 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; }