2008-06-10 10:42:34 +00:00
< script type = "text/javascript" >
var model = {
renderAt: '#containerDemo',
title: 'Datepicker Demos',
demos: [
{
2008-06-10 13:33:39 +00:00
title: 'Datepicker Basics',
2008-06-11 10:27:39 +00:00
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 > ' +
2008-06-17 10:15:11 +00:00
'< li > 10 years before and after the current year are shown< / li > ' +
2008-06-11 10:27:39 +00:00
'< 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 > ',
2008-06-12 12:09:40 +00:00
html: '< input type = "text" size = "10" value = "click here" id = "basics" / > \n' +
2008-06-11 10:27:39 +00:00
'< style type = "text/css" > . embed + img { position : relative ; left : -21 px ; top : -1 px ; } < / style > ',
2008-06-12 12:09:40 +00:00
destroy: '$("#basics").removeClass("embed").datepicker("enable").datepicker("destroy");',
2008-06-11 10:27:39 +00:00
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< / li > ' +
2008-06-10 13:33:39 +00:00
'< li > ctrl+page up/down - previous/next year< / 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 > ' +
2008-06-11 10:27:39 +00:00
'< li > escape - close the datepicker without selection< / li > < / ul > ',
html: '< input type = "text" size = "10" value = "" id = "keys" / > ',
2008-07-06 05:39:40 +00:00
destroy: '$("#keys").removeAttr("readonly").datepicker("destroy");',
2008-06-10 10:42:34 +00:00
options: [
2008-06-11 10:27:39 +00:00
{ desc: 'Default datepicker', source: '$("#keys").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
2008-06-17 10:15:11 +00:00
{ desc: 'Readonly input', source: '$("#keys").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}).attr("readonly", "readonly");' }
2008-06-10 13:33:39 +00:00
]
},
{
title: 'Restricting Datepicker',
2008-06-11 10:27:39 +00:00
desc: 'A datepicker can have its basic functionality restricted in various ways.',
2008-06-10 13:33:39 +00:00
html: '< input type = "text" size = "10" value = "" id = "restricting" / > ',
destroy: '$("#restricting").datepicker("destroy");',
options: [
2008-06-11 10:27:39 +00:00
{ 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});' }
2008-06-10 13:33:39 +00:00
]
},
{
2008-06-11 10:27:39 +00:00
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 > ' +
2008-07-23 12:39:48 +00:00
'< li > @ - Unix timestamp (ms since 01/01/1970)< / li > ' +
2008-06-11 10:27:39 +00:00
'< li > \'...\' - literal text< / li > ' +
'< li > \'\' - single quote< / li > < / ul > ',
2008-06-10 13:33:39 +00:00
html: '< input type = "text" size = "30" value = "" id = "formatted" / > ',
destroy: '$("#formatted").datepicker("destroy");',
options: [
2008-06-11 10:27:39 +00:00
{ 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});' },
2008-07-08 09:54:48 +00:00
{ 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}));' },
2008-06-11 10:27:39 +00:00
{ desc: 'With no century', source: '$("#formatted").datepicker({dateFormat: "dd/mm/y", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
2008-07-08 09:54:48 +00:00
{ 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});' }
2008-06-11 10:27:39 +00:00
]
},
{
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});' },
2008-06-12 12:09:40 +00:00
{ desc: 'Show day of year as cell title', source: '$("#dayByDay").datepicker({beforeShowDay: showDayOfYear, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
2008-06-11 10:27:39 +00:00
{ 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});' },
2008-06-12 12:09:40 +00:00
{ 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});' },
2008-06-16 12:52:39 +00:00
{ 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});' }
2008-06-11 10:27:39 +00:00
]
},
{
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.',
2008-07-23 12:39:48 +00:00
html: { url: 'templates/ui.datepicker.inl.html' },
destroy: '$("#inline").datepicker("destroy");$("#altInline").unbind("keyup");',
2008-06-11 10:27:39 +00:00
options: [
2008-07-23 12:39:48 +00:00
{ 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();' }
2008-06-11 10:27:39 +00:00
]
},
{
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: [
2008-07-23 12:39:48 +00:00
{ desc: 'Open in a dialog', source: '$("#dialogButton").click(function() { $(this).datepicker("dialog", $("#dialog").val(), setDateFromDialog, {prompt: "Choose a date", duration: ""}); return false; });' }
2008-06-11 10:27:39 +00:00
]
},
{
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.',
2008-06-13 13:22:02 +00:00
html: '< input type = "text" size = "24" value = "" id = "callbacks" / > ',
2008-06-11 10:27:39 +00:00
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});' },
2008-06-12 12:09:40 +00:00
{ desc: 'On close', source: '$("#callbacks").datepicker({onClose: function(date) { alert("Closed with date " + date); }, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
2008-06-13 13:22:02 +00:00
{ desc: 'On change of month/year', source: '$("#callbacks").datepicker({onChangeMonthYear: function(date) { alert("Moved to month " + $.datepicker.formatDate("MM yy", date)); }, 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(date) { alert("Moved to month " + $.datepicker.formatDate("MM yy", date)); }, rangeSelect: true, numberOfMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
2008-06-11 10:27:39 +00:00
]
},
2008-06-21 23:51:34 +00:00
{
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});' }
]
},
2008-06-11 10:27:39 +00:00
{
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: [
2008-06-17 10:15:11 +00:00
{ 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});' }
2008-06-11 10:27:39 +00:00
]
},
{
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});' },
2008-07-23 12:39:48 +00:00
{ 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: "< ", prevBigText: "< 6M", nextText: "> ", nextBigText: "6M> ", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
2008-06-11 10:27:39 +00:00
{ 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});' },
2008-06-17 10:15:11 +00:00
{ desc: 'Prev/Today/Next links as date formats', source: '$("#misc").datepicker({navigationAsDateFormat: true, prevText: "< M", currentText: "M y", nextText: "M> ", 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: "< MM", currentText: "MM yy", nextText: "MM> ", numberOfMonths: 2, stepMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));' },
2008-07-06 05:39:40 +00:00
{ desc: 'Today link goes to current selection', source: '$("#misc").datepicker({gotoCurrent: true, currentText: "Current", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
2008-07-18 09:23:10 +00:00
{ desc: 'Show the month select after the year one', source: '$("#misc").datepicker({monthAfterYear: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
2008-06-17 10:15:11 +00:00
{ 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});' },
2008-07-25 10:02:06 +00:00
{ 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});' }
2008-06-11 10:27:39 +00:00
]
},
{
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',
2008-07-08 09:54:48 +00:00
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).',
2008-06-11 10:27:39 +00:00
html: '< input type = "text" size = "10" value = "" id = "anim" / > ',
destroy: '$("#anim").datepicker("destroy");',
options: [
2008-07-08 09:54:48 +00:00
{ 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});' }
2008-06-10 13:33:39 +00:00
]
},
{
title: 'International Datepickers',
desc: 'Numerous international packs are available for the datepicker.',
2008-06-18 09:53:12 +00:00
html: '< input type = "text" size = "10" value = "" id = "i18n" / > thanks to < span id = "contrib" > < / span > ',
2008-06-10 13:33:39 +00:00
destroy: '$("#i18n").datepicker("destroy");',
options: [
2008-06-17 10:15:11 +00:00
{ desc: '简 体 中 文 (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: '簡 體 中 文 (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: 'б ъ л г а р с к и е з и к (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à (Catalan)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ca"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Joan Leon");' },
{ desc: 'Č eš 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ñ ol (Spanish)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["es"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Vester");' },
{ desc: 'Franç ais (French)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["fr"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Sté phane Nahmani");' },
{ desc: '한 국 어 (Korean)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ko"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("DaeKwon Kang");' },
{ desc: 'Հ ա յ ե ր ե ն (Armenian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["hy"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Levon Zakaryan");' },
{ desc: 'Í 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");' },
2008-07-25 10:02:06 +00:00
{ desc: 'Latvieš 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ų kalba (Lithuanian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["lt"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Arturas Paleicikas");' },
2008-06-17 10:15:11 +00:00
{ 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: '日 本 語 (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: 'ภ า ษ า ไ ท ย (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ê 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â nă (Romanian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ro"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Edmond L.");' },
{ desc: 'Р у с с к и й (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č 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: 'suomi (Finnish)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["fi"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Harri Kilpiö ");' },
{ 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ü rkç 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: 'У к р а ї н с ь к а (Ukranian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["uk"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Maxim Drogobitskiy");' }
2008-06-11 10:27:39 +00:00
]
},
{
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: [
2008-06-17 10:15:11 +00:00
{ desc: '‫ ا ل ع ر ب ي ة (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: '‫ ע ב ר י ת (Hebrew)', source: '$("#i18nrtl").datepicker($.extend({}, $.datepicker.regional["he"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib2").html("Amir Hardon");' }
2008-06-10 10:42:34 +00:00
]
2008-07-06 05:39:40 +00:00
},
{
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: '$("#styled").datepicker("destroy");$("link[title=Flora (Default)]").attr("href", "../../themes/flora/flora.all.css");',
options: [
{ desc: 'Default jQuery UI (Flora)', source: '$("#styled").datepicker({showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});$("link[title=Flora (Default)]").attr("href", "../../themes/flora/flora.all.css");' },
2008-07-20 16:22:26 +00:00
{ 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");' }
2008-07-06 05:39:40 +00:00
]
2008-06-10 10:42:34 +00:00
}
]
};
$(function(){
uiRenderDemo(model);
});
< / script >
