path: root/demos/functional/templates/ui.datepicker.html

<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;&#1601;&#1575;&#1585;&#1587;&#1740; (Farsi/Persian)',	source: '$("#i18nrtl").datepicker($.extend({}, $.datepicker.regional["fa"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib2").html("Javad Mowlanezhad");' },
					{	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>