/* * dialog_options.js */ (function($) { module("dialog: options"); test("autoOpen", function() { expect(2); el = $('
').dialog({ autoOpen: false }); isNotOpen('.dialog({ autoOpen: false })'); el.remove(); el = $('
').dialog({ autoOpen: true }); isOpen('.dialog({ autoOpen: true })'); el.remove(); }); test("buttons", function() { expect(21); var buttons = { "Ok": function(ev, ui) { ok(true, "button click fires callback"); equals(this, el[0], "context of callback"); equals(ev.target, btn[0], "event target"); }, "Cancel": function(ev, ui) { ok(true, "button click fires callback"); equals(this, el[0], "context of callback"); equals(ev.target, btn[1], "event target"); } }; el = $('
').dialog({ buttons: buttons }); var btn = $("button", dlg()); equals(btn.length, 2, "number of buttons"); var i = 0; $.each(buttons, function(key, val) { equals(btn.eq(i).text(), key, "text of button " + (i+1)); i++; }); ok(btn.parent().hasClass('ui-dialog-buttonset'), "buttons in container"); ok(el.parent().hasClass('ui-dialog-buttons'), "dialog wrapper adds class about having buttons"); btn.trigger("click"); var newButtons = { "Close": function(ev, ui) { ok(true, "button click fires callback"); equals(this, el[0], "context of callback"); equals(ev.target, btn[0], "event target"); } }; same(el.dialog("option", "buttons"), buttons, '.dialog("option", "buttons") getter'); el.dialog("option", "buttons", newButtons); same(el.dialog("option", "buttons"), newButtons, '.dialog("option", "buttons", ...) setter'); btn = $("button", dlg()); equals(btn.length, 1, "number of buttons after setter"); btn.trigger('click'); i = 0; $.each(newButtons, function(key, val) { equals(btn.eq(i).text(), key, "text of button " + (i+1)); i += 1; }); el.dialog("option", "buttons", null); btn = $("button", dlg()); equals(btn.length, 0, "all buttons have been removed"); equals(el.find(".ui-dialog-buttonset").length, 0, "buttonset has been removed"); equals(el.parent().hasClass('ui-dialog-buttons'), false, "dialog wrapper removes class about having buttons"); el.remove(); }); test("buttons - advanced", function() { expect(5); el = $("
").dialog({ buttons: [ { text: "a button", "class": "additional-class", id: "my-button-id", click: function() { equals(this, el[0], "correct context"); } } ] }); var buttons = dlg().find("button"); equals(buttons.length, 1, "correct number of buttons"); equals(buttons.attr("id"), "my-button-id", "correct id"); equals(buttons.text(), "a button", "correct label"); ok(buttons.hasClass("additional-class"), "additional classes added"); buttons.click(); el.remove(); }); test("closeOnEscape", function() { el = $('
').dialog({ closeOnEscape: false }); ok(true, 'closeOnEscape: false'); ok(dlg().is(':visible') && !dlg().is(':hidden'), 'dialog is open before ESC'); el.simulate('keydown', { keyCode: $.ui.keyCode.ESCAPE }) .simulate('keypress', { keyCode: $.ui.keyCode.ESCAPE }) .simulate('keyup', { keyCode: $.ui.keyCode.ESCAPE }); ok(dlg().is(':visible') && !dlg().is(':hidden'), 'dialog is open after ESC'); el.remove(); el = $('
').dialog({ closeOnEscape: true }); ok(true, 'closeOnEscape: true'); ok(dlg().is(':visible') && !dlg().is(':hidden'), 'dialog is open before ESC'); el.simulate('keydown', { keyCode: $.ui.keyCode.ESCAPE }) .simulate('keypress', { keyCode: $.ui.keyCode.ESCAPE }) .simulate('keyup', { keyCode: $.ui.keyCode.ESCAPE }); ok(dlg().is(':hidden') && !dlg().is(':visible'), 'dialog is closed after ESC'); }); test("closeText", function() { expect(3); el = $('
').dialog(); equals(dlg().find('.ui-dialog-titlebar-close span').text(), 'close', 'default close text'); el.remove(); el = $('
').dialog({ closeText: "foo" }); equals(dlg().find('.ui-dialog-titlebar-close span').text(), 'foo', 'closeText on init'); el.remove(); el = $('
').dialog().dialog('option', 'closeText', 'bar'); equals(dlg().find('.ui-dialog-titlebar-close span').text(), 'bar', 'closeText via option method'); el.remove(); }); test("dialogClass", function() { expect(4); el = $('
').dialog(); equals(dlg().is(".foo"), false, 'dialogClass not specified. foo class added'); el.remove(); el = $('
').dialog({ dialogClass: "foo" }); equals(dlg().is(".foo"), true, 'dialogClass in init. foo class added'); el.remove(); el = $('
').dialog({ dialogClass: "foo bar" }); equals(dlg().is(".foo"), true, 'dialogClass in init, two classes. foo class added'); equals(dlg().is(".bar"), true, 'dialogClass in init, two classes. bar class added'); el.remove(); }); test("draggable", function() { expect(4); el = $('
').dialog({ draggable: false }); shouldnotmove(); el.dialog('option', 'draggable', true); shouldmove(); el.remove(); el = $('
').dialog({ draggable: true }); shouldmove(); el.dialog('option', 'draggable', false); shouldnotmove(); el.remove(); }); test("height", function() { expect(3); el = $('
').dialog(); equals(dlg().height(), 150, "default height"); el.remove(); el = $('
').dialog({ height: 237 }); equals(dlg().height(), 237, "explicit height"); el.remove(); el = $('
').dialog(); el.dialog('option', 'height', 238); equals(dlg().height(), 238, "explicit height set after init"); el.remove(); }); test("maxHeight", function() { expect(3); el = $('
').dialog({ maxHeight: 200 }); drag('.ui-resizable-s', 1000, 1000); equals(heightAfter, 200, "maxHeight"); el.remove(); el = $('
').dialog({ maxHeight: 200 }); drag('.ui-resizable-n', -1000, -1000); equals(heightAfter, 200, "maxHeight"); el.remove(); el = $('
').dialog({ maxHeight: 200 }).dialog('option', 'maxHeight', 300); drag('.ui-resizable-s', 1000, 1000); equals(heightAfter, 300, "maxHeight"); el.remove(); }); test("maxWidth", function() { expect(3); el = $('
').dialog({ maxWidth: 200 }); drag('.ui-resizable-e', 1000, 1000); equals(widthAfter, 200, "maxWidth"); el.remove(); el = $('
').dialog({ maxWidth: 200 }); drag('.ui-resizable-w', -1000, -1000); equals(widthAfter, 200, "maxWidth"); el.remove(); el = $('
').dialog({ maxWidth: 200 }).dialog('option', 'maxWidth', 300); drag('.ui-resizable-w', -1000, -1000); equals(widthAfter, 300, "maxWidth"); el.remove(); }); test("minHeight", function() { expect(3); el = $('
').dialog({ minHeight: 10 }); drag('.ui-resizable-s', -1000, -1000); equals(heightAfter, 10, "minHeight"); el.remove(); el = $('
').dialog({ minHeight: 10 }); drag('.ui-resizable-n', 1000, 1000); equals(heightAfter, 10, "minHeight"); el.remove(); el = $('
').dialog({ minHeight: 10 }).dialog('option', 'minHeight', 30); drag('.ui-resizable-n', 1000, 1000); equals(heightAfter, 30, "minHeight"); el.remove(); }); test("minWidth", function() { expect(3); el = $('
').dialog({ minWidth: 10 }); drag('.ui-resizable-e', -1000, -1000); equals(widthAfter, 10, "minWidth"); el.remove(); el = $('
').dialog({ minWidth: 10 }); drag('.ui-resizable-w', 1000, 1000); equals(widthAfter, 10, "minWidth"); el.remove(); el = $('
').dialog({ minWidth: 30 }).dialog('option', 'minWidth', 30); drag('.ui-resizable-w', 1000, 1000); equals(widthAfter, 30, "minWidth"); el.remove(); }); test("position, default center on window", function() { var el = $('
').dialog(); var dialog = el.dialog('widget'); var offset = dialog.offset(); same(offset.left, Math.round($(window).width() / 2 - dialog.outerWidth() / 2) + $(window).scrollLeft()); same(offset.top, Math.round($(window).height() / 2 - dialog.outerHeight() / 2) + $(window).scrollTop()); el.remove(); }); test("position, top on window", function() { var el = $('
').dialog({ position: "top" }); var dialog = el.dialog('widget'); var offset = dialog.offset(); same(offset.left, Math.round($(window).width() / 2 - dialog.outerWidth() / 2) + $(window).scrollLeft()); same(offset.top, $(window).scrollTop()); el.remove(); }); test("position, left on window", function() { var el = $('
').dialog({ position: "left" }); var dialog = el.dialog('widget'); var offset = dialog.offset(); same(offset.left, 0); same(offset.top, Math.round($(window).height() / 2 - dialog.outerHeight() / 2) + $(window).scrollTop()); el.remove(); }); test("position, right bottom on window", function() { var el = $('
').dialog({ position: "right bottom" }); var dialog = el.dialog('widget'); var offset = dialog.offset(); same(offset.left, $(window).width() - dialog.outerWidth() + $(window).scrollLeft()); same(offset.top, $(window).height() - dialog.outerHeight() + $(window).scrollTop()); el.remove(); }); test("position, right bottom on window w/array", function() { var el = $('
').dialog({ position: ["right", "bottom"] }); var dialog = el.dialog('widget'); var offset = dialog.offset(); same(offset.left, $(window).width() - dialog.outerWidth() + $(window).scrollLeft()); same(offset.top, $(window).height() - dialog.outerHeight() + $(window).scrollTop()); el.remove(); }); test("position, offset from top left w/array", function() { var el = $('
').dialog({ position: [10, 10] }); var dialog = el.dialog('widget'); var offset = dialog.offset(); same(offset.left, 10 + $(window).scrollLeft()); same(offset.top, 10 + $(window).scrollTop()); el.remove(); }); test("position, right bottom at right bottom via ui.position args", function() { var el = $('
').dialog({ position: { my: "right bottom", at: "right bottom" } }); var dialog = el.dialog('widget'); var offset = dialog.offset(); same(offset.left, $(window).width() - dialog.outerWidth() + $(window).scrollLeft()); same(offset.top, $(window).height() - dialog.outerHeight() + $(window).scrollTop()); el.remove(); }); test("position, at another element", function() { var parent = $('
').css({ position: 'absolute', top: 400, left: 600, height: 10, width: 10 }).appendTo('body'); var el = $('
').dialog({ position: { my: "left top", at: "left top", of: parent } }); var dialog = el.dialog('widget'); var offset = dialog.offset(); same(offset.left, 600); same(offset.top, 400); el.dialog('option', 'position', { my: "left top", at: "right bottom", of: parent }); var offset = dialog.offset(); same(offset.left, 610); same(offset.top, 410); el.remove(); parent.remove(); }); test("resizable", function() { expect(4); el = $('
').dialog(); shouldresize("[default]"); el.dialog('option', 'resizable', false); shouldnotresize('disabled after init'); el.remove(); el = $('
').dialog({ resizable: false }); shouldnotresize("disabled in init options"); el.dialog('option', 'resizable', true); shouldresize('enabled after init'); el.remove(); }); test("title", function() { expect(9); function titleText() { return dlg().find(".ui-dialog-title").html(); } el = $('
').dialog(); // some browsers return a non-breaking space and some return " " // so we get the text to normalize to the actual non-breaking space equals(dlg().find(".ui-dialog-title").text(), " ", "[default]"); equals(el.dialog("option", "title"), "", "option not changed"); el.remove(); el = $('
').dialog(); equals(titleText(), "foo", "title in element attribute"); equals(el.dialog("option", "title"), "foo", "option updated from attribute"); el.remove(); el = $('
').dialog({ title: 'foo' }); equals(titleText(), "foo", "title in init options"); equals(el.dialog("option", "title"), "foo", "opiton set from options hash"); el.remove(); el = $('
').dialog({ title: 'bar' }); equals(titleText(), "bar", "title in init options should override title in element attribute"); equals(el.dialog("option", "title"), "bar", "opiton set from options hash"); el.remove(); el = $('
').dialog().dialog('option', 'title', 'foo'); equals(titleText(), 'foo', 'title after init'); el.remove(); }); test("width", function() { expect(3); el = $('
').dialog(); equals(dlg().width(), 300, "default width"); el.remove(); el = $('
').dialog({width: 437 }); equals(dlg().width(), 437, "explicit width"); el.dialog('option', 'width', 438); equals(dlg().width(), 438, 'explicit width after init'); el.remove(); }); })(jQuery); ='n209' href='#n209'>209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 
<script type="text/javascript">
// Prepare to show a date picker linked to three select controls
function readLinked() {
	$("#linkedDates").val($("#selectMonth").val() + "/" +
		$("#selectDay").val() + "/" + $("#selectYear").val());
	return {};
}

// Update three select controls to match a date picker selection
function updateLinked(date) {
	$("#selectMonth").val(date.substring(0, 2));
	$("#selectDay").val(date.substring(3, 5));
	$("#selectYear").val(date.substring(6, 10));
}

// Prevent selection of invalid dates through the select controls
function checkLinkedDays() {
	var daysInMonth = 32 - new Date($("#selectYear").val(),
		$("#selectMonth").val() - 1, 32).getDate();
	$("#selectDay option").attr("disabled", "");
	$("#selectDay option:gt(" + (daysInMonth - 1) +")").attr("disabled", "disabled");
	if ($("#selectDay").val() > daysInMonth) {
		$("#selectDay").val(daysInMonth);
	}
}
function customRange(input) {
	return {minDate: (input.id == "endDate" ? $("#startDate").datepicker("getDate") : null),
		maxDate: (input.id == "startDate" ? $("#endDate").datepicker("getDate") : null)};
}
</script>

<script type="text/javascript">

	var model = {

		renderAt: '#containerDemo',

		title: 'Datepicker Demos',

		demos: [

			{
				title: 'Datepicker Basics',
				desc: 'A datepicker can easily be added to an input field with default settings:' +
					'<ul style="list-style: disc; padding-left: 2em;"><li>Datepicker appears on focus</li>' +
					'<li>Text is in English</li>' +
					'<li>Date format is mm/dd/yyyy</li>' +
					'<li>Clear/Close controls show at the top</li>' +
					'<li>Month and year are selectable directly</li>' +
					'<li>10 years before and after the current year are shown</li>' +
					'<li>Show a single month</li>' +
					'<li>Select a single date</li>' +
					'<li>Week starts on Sunday</li>' +
					'<li>Day names are clickable to change the first day of the week</li>' +
					'<li>Days in other months are not displayed</li>' +
					'<li>No date restrictions</li>' +
					'<li>Clicking elsewhere closes the date picker</li></ul>',
				html: '<input type="text" size="10" value="click here" id="basics"/>\n' + 
					'<style type="text/css">.embed + img { position: relative; left: -21px; top: -1px; }</style>',
				destroy: '$("#basics").removeClass("embed").datepicker("enable").datepicker("destroy");',

				options: [
					{	desc: 'Default datepicker - open on focus',	source: '$("#basics").datepicker();' },
					{	desc: 'Open on button only',	source: '$("#basics").datepicker({showOn: "button"});' },
					{	desc: 'Open on image button only',	source: '$("#basics").datepicker({showOn: "button", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Open on focus or button',	source: '$("#basics").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Embed the button in the input (with CSS)',	source: '$("#basics").datepicker({showOn: "button", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}).addClass("embed");' },
					{	desc: 'Disabled datepicker',	source: '$("#basics").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}).datepicker("disable");' }
				]
			},

			{
				title: 'Keystrokes',
				desc: 'You can use the keyboard to enter dates and to control the datepicker:' +
					'<ul style="list-style: disc; padding-left: 2em;"><li>page up/down - previous/next month (based on <i>stepMonths</i>)</li>' +
					'<li>ctrl+page up/down - previous/next year (based on <i>stepBigMonths</i>)</li>' +
					'<li>ctrl+home - current month or open when closed</li>' +
					'<li>ctrl+left/right - previous/next day</li>' +
					'<li>ctrl+up/down - previous/next week</li>' +
					'<li>enter - accept the selected date</li>' +
					'<li>ctrl+end - close and erase the date</li>' +
					'<li>escape - close the datepicker without selection</li></ul>',
				html: '<input type="text" size="10" value="" id="keys"/>',
				destroy: '$("#keys").removeAttr("readonly").datepicker("destroy");',

				options: [
					{	desc: 'Default datepicker',	source: '$("#keys").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Readonly input',	source: '$("#keys").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}).attr("readonly", "readonly");' }
				]
			},

			{
				title: 'Restricting Datepicker',
				desc: 'A datepicker can have its basic functionality restricted in various ways.',
				html: '<input type="text" size="10" value="" id="restricting"/>',
				destroy: '$("#restricting").datepicker("destroy");',

				options: [
					{	desc: 'First day of week is Monday and can\'t change it',	source: '$("#restricting").datepicker({firstDay: 1, changeFirstDay: false, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Can\'t change month/year from dropdowns',	source: '$("#restricting").datepicker({changeMonth: false, changeYear: false, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Year dropdown shows last 20 years',	source: '$("#restricting").datepicker({yearRange: "-20:+0", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Year dropdown shows 2000 to 2010',	source: '$("#restricting").datepicker({yearRange: "2000:2010", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Dates from Jan 26 2005 to Jan 26 2007 only',	source: '$("#restricting").datepicker({minDate: new Date(2005, 1 - 1, 26), maxDate: new Date(2007, 1 - 1, 26), showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Dates within the next 365 days only',	source: '$("#restricting").datepicker({minDate: 0, maxDate: 365, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Dates from yesterday to 6 years away only',	source: '$("#restricting").datepicker({minDate: "-1d", maxDate: "6y", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
				]
			},

			{
				title: 'Date Formats',
				desc: 'A datepicker can display its value in numerous formats, with the default being "mm/dd/yy". ' +
					'The formatting codes are:' +
					'<ul style="list-style: disc; padding-left: 2em;"><li>d - day of month (no leading zero)</li>' +
					'<li>dd - day of month (two digit)</li>' +
					'<li>D - day name short</li>' +
					'<li>DD - day name long</li>' +
					'<li>m - month of year (no leading zero)</li>' +
					'<li>mm - month of year (two digit)</li>' +
					'<li>M - month name short</li>' +
					'<li>MM - month name long</li>' +
					'<li>y - year (two digit)</li>' +
					'<li>yy - year (four digit)</li>' +
					'<li>@ - Unix timestamp (ms since 01/01/1970)</li>' +
					'<li>\'...\' - literal text</li>' +
					'<li>\'\' - single quote</li></ul>',
				html: '<input type="text" size="30" value="" id="formatted"/>',
				destroy: '$("#formatted").datepicker("destroy");',

				options: [
					{	desc: 'Medium format',	source: '$("#formatted").datepicker({dateFormat: "M d, yy", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Long format',	source: '$("#formatted").datepicker({dateFormat: "MM d, yy", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Full format',	source: '$("#formatted").datepicker({dateFormat: "DD, MM d, yy", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'French full format',	source: '$("#formatted").datepicker($.extend({}, $.datepicker.regional["fr"], {dateFormat: "DD, MM d, yy", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));' },
					{	desc: 'With no century',	source: '$("#formatted").datepicker({dateFormat: "dd/mm/y", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'ATOM format (ISO 8601)',	source: '$("#formatted").datepicker({dateFormat: $.datepicker.ATOM, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Cookie format',	source: '$("#formatted").datepicker({dateFormat: $.datepicker.COOKIE, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'ISO 8601 format',	source: '$("#formatted").datepicker({dateFormat: $.datepicker.ISO_8601, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'RFC 822 format',	source: '$("#formatted").datepicker({dateFormat: $.datepicker.RFC_822, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'RFC 850 format',	source: '$("#formatted").datepicker({dateFormat: $.datepicker.RFC_850, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'RFC 1026 format',	source: '$("#formatted").datepicker({dateFormat: $.datepicker.RFC_1036, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'RFC 1123 format',	source: '$("#formatted").datepicker({dateFormat: $.datepicker.RFC_1123, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'RFC 2822 format',	source: '$("#formatted").datepicker({dateFormat: $.datepicker.RFC_2822, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'RSS format (RFC 822)',	source: '$("#formatted").datepicker({dateFormat: $.datepicker.RSS, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Timestamp format (ms since 01/01/1970)',	source: '$("#formatted").datepicker({dateFormat: $.datepicker.TIMESTAMP, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'W3C format (ISO 8601)',	source: '$("#formatted").datepicker({dateFormat: $.datepicker.W3C, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
				]
			},

			{
				title: 'Day-by-day Modifications',
				desc: 'You have several mechanisms for modifying the datepicker\'s appearance on a day-by-day basis.',
				html: { url: 'templates/ui.datepicker.dbd.html' },
				destroy: '$("#dayByDay").datepicker("destroy");',

				options: [
					{	desc: 'Weekends are not selectable',	source: '$("#dayByDay").datepicker({beforeShowDay: $.datepicker.noWeekends, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Highlight some national days (via CSS)',	source: '$("#dayByDay").datepicker({beforeShowDay: nationalDays, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Show day of year as cell title',	source: '$("#dayByDay").datepicker({beforeShowDay: showDayOfYear, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Customise status line for today',	source: '$("#dayByDay").datepicker({showStatus: true, statusForDate: highlightToday, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
				]
			},

			{
				title: 'Date Ranges',
				desc: 'Choose a range of dates instead of a single one by clicking firstly on the starting date, then on the ending date.',
				html: '<input type="text" size="24" value="" id="ranges"/>',
				destroy: '$("#ranges").datepicker("destroy");',

				options: [
					{	desc: 'Range select with a single month',	source: '$("#ranges").datepicker({rangeSelect: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Range select showing two months',	source: '$("#ranges").datepicker({rangeSelect: true, numberOfMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Range select showing six months (moving three at a time)',	source: '$("#ranges").datepicker({rangeSelect: true, numberOfMonths: [2, 3], stepMonths: 3, prevText: "<< Previous Months", nextText: "Next Months >>", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Range select excluding weekends',	source: '$("#ranges").datepicker({rangeSelect: true, numberOfMonths: 2, beforeShowDay: $.datepicker.noWeekends, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Range select with min/max settings',	source: '$("#ranges").datepicker({rangeSelect: true, numberOfMonths: 2, minDate: "6w", maxDate: "2y", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
				]
			},

			{
				title: 'Another Date Range',
				desc: 'Synchronise two datepickers to together select a date range.',
				html: { url: 'templates/ui.datepicker.two.html' },
				destroy: '$("#startDate,#endDate").datepicker("destroy");',

				options: [
					{	desc: 'Range select with two datepickers',	source: '$("#startDate,#endDate").datepicker({beforeShow: customRange, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
				]
			},

			{
				title: 'Inline Datepicker',
				desc: 'A datepicker can also be shown inline, rather than popping-up, by targetting a division instead of an input field. ' +
					'Use the <i>onSelect</i> callback to be notified of date selections.',
				html: { url: 'templates/ui.datepicker.inl.html' },
				destroy: '$("#inline").datepicker("destroy");$("#altInline").unbind("keyup");',

				options: [
					{	desc: 'Single month inline',	source: '$("#inline").datepicker({onSelect: function(date) { alert("The chosen date is " + date); }});$("#altInline").hide();' },
					{	desc: 'Range select inline',	source: '$("#inline").datepicker({rangeSelect: true, onSelect: function(date) { alert("The chosen dates are " + date); }});$("#altInline").hide();' },
					{	desc: 'Range select showing two months inline',	source: '$("#inline").datepicker({rangeSelect: true, numberOfMonths: 2}).children("div").css("width", "370px");$("#altInline").hide();' },
					{	desc: 'Highlight some national days (via CSS)',	source: '$("#inline").datepicker({beforeShowDay: nationalDays});$("#altInline").hide();' },
					{	desc: 'Inline linked to an input field',	source: '$("#inline").datepicker({altField: "#altInline", altFormat: "mm/dd/yy"});$("#altInline").show().keyup(setInlineDate);' },
					{	desc: 'Disabled inline',	source: '$("#inline").datepicker().datepicker("disable");$("#altInline").hide();' }
				]
			},

			{
				title: 'Datepicker in a Dialog',
				desc: 'A datepicker can also be opened within a "dialog" box.',
				html: { url: 'templates/ui.datepicker.dlg.html' },
				destroy: '',

				options: [
					{	desc: 'Open in a dialog',	source: '$("#dialogButton").click(function() { $(this).datepicker("dialog", $("#dialog").val(), setDateFromDialog, {prompt: "Choose a date", duration: ""}); return false; });' }
				]
			},

			{
				title: 'Datepicker Linked to Dropdowns',
				desc: 'With a bit of wiring code, you can link the datepicker with three dropdowns for date selection.',
				html: { url: 'templates/ui.datepicker.sel.html' },
				destroy: '',

				options: [
					{	desc: 'Linked to dropdowns',	source: '$("#linkedDates").datepicker({minDate: new Date(2001, 1 - 1, 1), maxDate: new Date(2010, 12 - 1, 31), beforeShow: readLinked, onSelect: updateLinked, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}); $("#selectMonth, #selectYear").change(checkLinkedDays);' }
				]
			},

			{
				title: 'Callbacks',
				desc: 'Custom functions may be invoked when certain events occur within the datepicker.',
				html: '<input type="text" size="24" value="" id="callbacks"/>',
				destroy: '$("#callbacks").datepicker("destroy");',

				options: [
					{	desc: 'On select',	source: '$("#callbacks").datepicker({onSelect: function(date) { alert("The chosen date is " + date); }, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'On close',	source: '$("#callbacks").datepicker({onClose: function(date) { alert("Closed with date " + date); }, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'On change of month/year',	source: '$("#callbacks").datepicker({onChangeMonthYear: function(year, month) { alert("Moved to month " + month + "/" + year); }, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'On select for range',	source: '$("#callbacks").datepicker({onSelect: function(date) { alert("The chosen dates are " + date); }, rangeSelect: true, numberOfMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'On close for range',	source: '$("#callbacks").datepicker({onClose: function(date) { alert("Closed with dates " + date); }, rangeSelect: true, numberOfMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'On change of month/year for range',	source: '$("#callbacks").datepicker({onChangeMonthYear: function(year, month) { alert("Moved to month " + month + "/" + year); }, rangeSelect: true, numberOfMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
				]
			},

			{
				title: 'Alternate Field and Format',
				desc: 'Simultaneously update an alternate field using an alternate date format. ' +
					'This could be used to display selected dates in one format, while submitting ' +
					'the dates in another format from a hidden field. The alternate field is ' +
					'displayed here to demonstrate the functionality.',
				html: '<input type="text" size="24" value="" id="alt1" readonly="readonly"/>\n' +
					'<input type="text" size="24" value="" id="alt2" readonly="readonly"/>',
				destroy: '$("#alt1").datepicker("destroy"); $("#alt2").val("");',

				options: [
					{	desc: 'Single date selection',	source: '$("#alt1").datepicker({altField: "#alt2", altFormat: "yy-mm-dd", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Range date selection',	source: '$("#alt1").datepicker({altField: "#alt2", altFormat: "yy-mm-dd", rangeSelect: true, numberOfMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
				]
			},

			{
				title: 'Default Date',
				desc: 'Control which date is shown if the datepicker is opened with no value. The default is today.',
				html: '<input type="text" size="10" value="" id="defaultDate"/>',
				destroy: '$("#defaultDate").datepicker("destroy");',

				options: [
					{	desc: 'Specific date - January 1, 2007',	source: '$("#defaultDate").datepicker({defaultDate: new Date(2007, 1 - 1, 1), showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Relative date - 7 days from today',	source: '$("#defaultDate").datepicker({defaultDate: +7, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Relative date - 2 weeks from today',	source: '$("#defaultDate").datepicker({defaultDate: "+2w", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Relative date - 10 days and 1 month from today',	source: '$("#defaultDate").datepicker({defaultDate: "+10 D +1 M", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
				]
			},

			{
				title: 'Miscellaneous',
				desc: 'There are many other miscellaneous settings you can apply.',
				html: '<input type="text" size="10" value="" id="misc"/>',
				destroy: '$("#misc").datepicker("destroy");',

				options: [
					{	desc: 'Append text to the datepicker',	source: '$("#misc").datepicker({appendText: "(format mm/dd/yyyy)", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Move Clear/Close controls to the bottom',	source: '$("#misc").datepicker({closeAtTop: false, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Make the datepicker mandatory (no Clear)',	source: '$("#misc").datepicker({mandatory: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Show big Prev/Next links',	source: '$("#misc").datepicker({showBigPrevNext: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Show big Prev/Next links moving 6 months',	source: '$("#misc").datepicker({showBigPrevNext: true, stepBigMonths: 6, prevText: "&lt;", prevBigText: "&lt;6M", nextText: "&gt;", nextBigText: "6M&gt;", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Hide Prev/Next links if not applicable',	source: '$("#misc").datepicker({hideIfNoPrevNext: true, minDate: new Date(2008, 1 - 1, 26), maxDate: new Date(2008, 3 - 1, 26), showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Prev/Today/Next links as date formats',	source: '$("#misc").datepicker({navigationAsDateFormat: true, prevText: "&lt;M", currentText: "M y", nextText: "M&gt;", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Prev/Today/Next links as date formats in French',	source: '$("#misc").datepicker($.extend({}, $.datepicker.regional["fr"], {navigationAsDateFormat: true, prevText: "&lt;MM", currentText: "MM yy", nextText: "MM&gt;", numberOfMonths: 2, stepMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));' },
					{	desc: 'Today link goes to current selection',	source: '$("#misc").datepicker({gotoCurrent: true, currentText: "Current", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Show the month select after the year one',	source: '$("#misc").datepicker({showMonthAfterYear: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Highlight the hovered week',	source: '$("#misc").datepicker({highlightWeek: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Show days from other months',	source: '$("#misc").datepicker({showOtherMonths: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Show week of the year (ISO 8601)',	source: '$("#misc").datepicker({showWeeks: true, firstDay: 1, changeFirstDay: false, showOtherMonths: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Show a status bar with more explanation',	source: '$("#misc").datepicker({showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Show three months at a time',	source: '$("#misc").datepicker({numberOfMonths: 3, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Show three months with current in the middle',	source: '$("#misc").datepicker({numberOfMonths: 3, showCurrentAtPos: 1, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Show three months ending at current one',	source: '$("#misc").datepicker({numberOfMonths: 3, showCurrentAtPos: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
				]
			},

			{
				title: 'Inline Configuration',
				desc: 'You can configure each input field inline by adding attributes with the same name '+
					'as the datepicker settings and a "date:" prefix.',
				html: '<input type="text" size="10" value="" id="config" \n' +
					'date:closeAtTop="false" date:firstDay="1" date:appendText="(pick a date)"/>',
				destroy: '$("#config").datepicker("destroy");',

				options: [
					{	desc: 'Inline configuration - see source',	source: '$("#config").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
				]
			},

			{
				title: 'Animations',
				desc: 'You can control how the datepicker appears - both its style and duration. The default is a medium duration animation expanding from the top-left (show).',
				html: '<input type="text" size="10" value="" id="anim"/>',
				destroy: '$("#anim").datepicker("destroy");',

				options: [
					{	desc: 'Show at slow duration',	source: '$("#anim").datepicker({duration: "slow", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Show at normal duration (default)',	source: '$("#anim").datepicker({duration: "normal", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Show at fast duration',	source: '$("#anim").datepicker({duration: "fast", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Show immediately',	source: '$("#anim").datepicker({duration: "", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Fade in at normal duration',	source: '$("#anim").datepicker({showAnim: "fadeIn", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Slide down at slow duration',	source: '$("#anim").datepicker({showAnim: "slideDown", duration: "slow", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Blind horizontally',	source: '$("#anim").datepicker({showAnim: "blind", showOptions: {direction: "horizontal"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Blind vertically',	source: '$("#anim").datepicker({showAnim: "blind", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Clip horizontally',	source: '$("#anim").datepicker({showAnim: "clip", showOptions: {direction: "horizontal"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Clip vertically',	source: '$("#anim").datepicker({showAnim: "clip", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Drop up',	source: '$("#anim").datepicker({showAnim: "drop", showOptions: {direction: "up"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Drop down',	source: '$("#anim").datepicker({showAnim: "drop", showOptions: {direction: "down"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Drop left',	source: '$("#anim").datepicker({showAnim: "drop", showOptions: {direction: "left"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Drop right',	source: '$("#anim").datepicker({showAnim: "drop", showOptions: {direction: "right"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Explode (2 secs duration)',	source: '$("#anim").datepicker({showAnim: "explode", duration: 2000, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Fold',	source: '$("#anim").datepicker({showAnim: "fold", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Puff',	source: '$("#anim").datepicker({showAnim: "puff", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Scale to center',	source: '$("#anim").datepicker({showAnim: "scale", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Scale to top-left',	source: '$("#anim").datepicker({showAnim: "scale", showOptions: {origin: ["top", "left"]}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Slide up',	source: '$("#anim").datepicker({showAnim: "slide", showOptions: {direction: "up"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Slide down',	source: '$("#anim").datepicker({showAnim: "slide", showOptions: {direction: "down"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Slide left',	source: '$("#anim").datepicker({showAnim: "slide", showOptions: {direction: "left"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Slide right',	source: '$("#anim").datepicker({showAnim: "slide", showOptions: {direction: "right"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
				]
			},

			{
				title: 'International Datepickers',
				desc: 'Numerous international packs are available for the datepicker.',
				html: '<input type="text" size="10" value="" id="i18n"/> thanks to <span id="contrib"></span>',
				destroy: '$("#i18n").datepicker("destroy");',

				options: [
					{	desc: '&#31616;&#20307;&#20013;&#25991; (Chinese Simplified)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["zh-CN"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Cloudream");' },
					{	desc: '&#32321;&#39636;&#20013;&#25991; (Chinese Traditional)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["zh-TW"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Ressol");' },
					{	desc: 'Bahasa Indonesia (Indonesian)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["id"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Deden Fathurahman");' },
					{	desc: '&#1073;&#1098;&#1083;&#1075;&#1072;&#1088;&#1089;&#1082;&#1080; &#1077;&#1079;&#1080;&#1082; (Bulgarian)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["bg"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Stoyan Kyosev");' },
					{	desc: 'Catal&agrave; (Catalan)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ca"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Joan Leon");' },
					{	desc: '&#268;e&#353;tina (Czech)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["cs"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Tomas Muller");' },
					{	desc: 'Dansk (Danish)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["da"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Jan Christensen");' },
					{	desc: 'Deutsch (German)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["de"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Milian Wolff");' },
					{	desc: 'Espa&ntilde;ol (Spanish)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["es"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Vester");' },
					{	desc: 'Esperanto',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["eo"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Olivier M.");' },
					{	desc: 'Fran&ccedil;ais (French)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["fr"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("St&eacute;phane Nahmani");' },
					{	desc: '&#54620;&#44397;&#50612; (Korean)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ko"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("DaeKwon Kang");' },
					{	desc: 'Hrvatski jezik (Croatian)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["hr"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Vjekoslav Nesek");' },
					{	desc: '&#1344;&#1377;&#1397;&#1381;&#1408;&#1381;&#1398; (Armenian)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["hy"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Levon Zakaryan");' },
					{	desc: '&Iacute;slenska (Icelandic)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["is"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Haukur H. Thorsson");' },
					{	desc: 'Italiano (Italian)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["it"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Apaella");' },
					{	desc: 'Latvie&#353;u Valoda (Latvian)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["lv"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Arturas Paleicikas");' },
					{	desc: 'lietuvi&#371; kalba (Lithuanian)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["lt"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Arturas Paleicikas");' },
					{	desc: 'Magyar (Hungarian)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["hu"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Istvan Karaszi");' },
					{	desc: 'Nederlands (Dutch)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["nl"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("???");' },
					{	desc: '&#26085;&#26412;&#35486; (Japanese)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ja"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Milly");' },
					{	desc: 'Norsk (Norwegian)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["no"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Naimdjon Takhirov");' },
					{	desc: '&#3616;&#3634;&#3625;&#3634;&#3652;&#3607;&#3618; (Thai)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["th"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("pipo");' },
					{	desc: 'Polski (Polish)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["pl"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Jacek Wysocki");' },
					{	desc: 'Portugu&ecirc;s (Portuguese/Brazilian)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["pt-BR"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Leonildo Costa Silva");' },
					{	desc: 'Rom&acirc;n&#259; (Romanian)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ro"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Edmond L.");' },
					{	desc: '&#1056;&#1091;&#1089;&#1089;&#1082;&#1080;&#1081; (Russian)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ru"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Andrew Stromnov");' },
					{	desc: 'Sloven&#269;ina (Slovak)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["sk"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Vojtech Rinik");' },
					{	desc: 'Slovenski Jezik (Slovenian)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["sl"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Jaka Jan&#269;ar");' },
					{	desc: 'suomi (Finnish)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["fi"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Harri Kilpi&ouml;");' },
					{	desc: 'Svenska (Swedish)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["sv"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Anders Ekdahl");' },
					{	desc: 'T&uuml;rk&ccedil;e (Turkish)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["tr"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Izzet Emre Erkan");' },
					{	desc: '&#1059;&#1082;&#1088;&#1072;&#1111;&#1085;&#1089;&#1100;&#1082;&#1072; (Ukranian)',	source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["uk"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Maxim Drogobitskiy");' }
				]
			},

			{
				title: 'International Datepickers Right-to-left',
				desc: 'Some international packs change the orientation of the datepicker to right-to-left.',
				html: '<input type="text" size="10" value="" id="i18nrtl"/> thanks to <span id="contrib2"></span>',
				destroy: '$("#i18nrtl").datepicker("destroy");',

				options: [
					{	desc: '&#8235;&#1575;&#1604;&#1593;&#1585;&#1576;&#1610;&#1577; (Arabic)',	source: '$("#i18nrtl").datepicker($.extend({}, $.datepicker.regional["ar"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib2").html("Khaled Al Horani");' },
					{	desc: '&#8235;&#1506;&#1489;&#1512;&#1497;&#1514; (Hebrew)',	source: '$("#i18nrtl").datepicker($.extend({}, $.datepicker.regional["he"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib2").html("Amir Hardon");' }
				]
			},

			{
				title: 'Alternate Styling',
				desc: 'Change the look-and-feel of the datepicker with alternative CSS.<br/>(Be sure to change it back again before going to another page.)',
				html: '<input type="text" size="10" value="" id="styled"/>',
				destroy: '',

				options: [
					{	desc: 'Default jQuery UI (Flora)',	source: '$("#styled").datepicker({showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
					{	desc: 'Original datepicker styling',	source: '$("#styled").datepicker({showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});$("link[title=Flora (Default)]").attr("href", "../../themes/default/ui.datepicker.css");' }
				]
			}

		]

	};

	$(function(){

		uiRenderDemo(model);

	});

</script>
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-14 20:44:01 +0000