From jQuery JavaScript Library

« Back to UI/Datepicker

v3.3 to v3.4

More change to the jQuery UI interfaces required another upgrade and corresponding compatibility module.

Users of v3.3 of the datepicker should use the following header code to work with their existing implementation:

<link rel="stylesheet" type="text/css" href="ui.datepicker.css"/>
<script type="text/javascript" src="ui.datepicker.js"></script>
<script type="text/javascript" src="ui.datepicker.compatibility-3.3.js"></script>

To migrate fully, the following steps need to be taken:

• Replace references to the attachDatepicker function with datepicker.
• Replace references to the $(selector).changeDatepicker(...) function with $(selector).datepicker("change", ...).
• Replace references to the $(selector).enableDatepicker() function with $(selector).datepicker("enable").
• Replace references to the $(selector).disableDatepicker() function with $(selector).datepicker("disable").
• Replace references to the $(selector).isDisabledDatepicker() function with $(selector).datepicker("isDisabled").
• Replace references to the $(selector).showDatepicker() function with $(selector).datepicker("show").
• Replace references to the $(selector).getDatepickerDate() function with $(selector).datepicker("getDate").
• Replace references to the $(selector).setDatepickerDate(...) function with $(selector).datepicker("setDate", ...).

For example, this old style code:

$('inputs').attachDatepicker();
$('inputs').changeDatepicker({...});

becomes:

$('inputs').datepicker();
$('inputs').datepicker("change", {...});

v3.2 to v3.4

To align the datepicker more closely with other jQuery UI components, further changes were made in v3.3, resulting in another compatibility module.

Users of v3.2 of the datepicker should use the following header code to work with their existing implementation:

<link rel="stylesheet" type="text/css" href="ui.datepicker.css"/>
<script type="text/javascript" src="ui.datepicker.js"></script>
<script type="text/javascript" src="ui.datepicker.compatibility-3.2.js"></script>

To migrate fully, the following steps need to be taken:

• Replace references to the $.datepicker.reconfigureFor(selector, ...) function with $(selector).datepicker("change", ...).
• Replace references to the $.datepicker.enableFor(selector) function with $(selector).datepicker("enable").
• Replace references to the $.datepicker.disableFor(selector) function with $(selector).datepicker("disable").
• Replace references to the $.datepicker.isDisabled(selector) function with $(selector).datepicker("isDisabled").
• Replace references to the $.datepicker.showFor(selector) function with $(selector).datepicker("show").
• Replace references to the $.datepicker.getDateFor(selector) function with $(selector).datepicker("getDate").
• Replace references to the $.datepicker.setDateFor(selector, ...) function with $(selector).datepicker("setDate", ...).

For example, this old style code:

$.datepicker.reconfigureFor('inputs', {...});

becomes:

$('input').datepicker("change", {...});

v2.x to v3.3

The date picker has been refactored to better fit within the jQuery UI project. This has involved renaming the main function and some properties, resulting in current uses of the plugin no longer functioning correctly. To assist in the transition to the new format a compatibility plugin is also provided, allowing current code to continue to operate with minimal changes.

Existing users of v2 of the calendar should use the following header code to work with their existing implementation:

<link rel="stylesheet" type="text/css" href="ui.datepicker.css"/>
<script type="text/javascript" src="ui.datepicker.js"></script>
<script type="text/javascript" src="jquery-calendar-compatibility.js"></script>

To migrate fully, the following steps need to be taken:

• Replace references to the jquery-calendar* files with ui.datepicker*.
• Replace references to the popUpCal object with $.datepicker.
• Replace references to the calendar function with attachDatepicker.
• Replace references to the autoPopUp setting with showOn.
• Replace references to the fieldSettings setting with beforeShow.
• Replace references to the customDate setting with beforeShowDay.
• Replace references to inline attributes with the cal: namespace with date:.
• Replace references to the hideCalendar function with hideDatepicker.
• Replace references to the dialogCalendar function with dialogDatepicker.
• Replace references to the $.datepicker.reconfigureFor(selector, ...) function with $(selector).datepicker("change", ...).
• Replace references to the $.datepicker.enableFor(selector) function with $(selector).datepicker("enable").
• Replace references to the $.datepicker.disableFor(selector) function with $(selector).datepicker("disable").
• Replace references to the $.datepicker.showFor(selector) function with $(selector).datepicker("show").
• Replace references to the $.datepicker.getDateFor(selector) function with $(selector).datepicker("getDate").
• Replace references to the $.datepicker.setDateFor(selector, ...) function with $(selector).datepicker("setDate", ...).
• Replace references to the calendar* CSS styles with datepicker*.

For example, this old style code:

$('inputs').calendar({autoPopUp: 'both', fieldSettings: setDateRange,
	customDate: popUpCal.noWeekends});
	
<input type="text" id="inlineConfig" cal:defaultDate="+7"/>

becomes:

$('inputs').datepicker({showOn: 'both', beforeShow: setDateRange,
	beforeShowDay: $.datepicker.noWeekends});
	
<input type="text" id="inlineConfig" date:defaultDate="+7"/>