diff options
Diffstat (limited to 'demos/functional')
27 files changed, 1264 insertions, 0 deletions
diff --git a/demos/functional/datepicker/debug.html b/demos/functional/datepicker/debug.html new file mode 100644 index 000000000..91dab145b --- /dev/null +++ b/demos/functional/datepicker/debug.html @@ -0,0 +1,21 @@ +<html> + <head> + <title>Only core files for easy debug</title> + <link rel="stylesheet" href="../../../themes/ui.datepicker.css" type="text/css" media="screen" title="default" charset="utf-8"> + </head> + <body> + <input type="text" name="testing" value="click" id="testing" /> + + <!-- Include jQuery --> + <script src="../../../../jquery/jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script> + + <!-- Include UI Datepicker --> + <script src="../../../source/ui.datepicker.js" type="text/javascript" charset="utf-8"></script> + + <script type="text/javascript" charset="utf-8"> + $(function(){ + $('#testing').datepicker(); + }); + </script> + </body> +</html>
\ No newline at end of file diff --git a/demos/functional/datepicker/demo/img/active-bg.gif b/demos/functional/datepicker/demo/img/active-bg.gif Binary files differnew file mode 100644 index 000000000..d608c5469 --- /dev/null +++ b/demos/functional/datepicker/demo/img/active-bg.gif diff --git a/demos/functional/datepicker/demo/img/ar.gif b/demos/functional/datepicker/demo/img/ar.gif Binary files differnew file mode 100644 index 000000000..f34c90f5c --- /dev/null +++ b/demos/functional/datepicker/demo/img/ar.gif diff --git a/demos/functional/datepicker/demo/img/au.gif b/demos/functional/datepicker/demo/img/au.gif Binary files differnew file mode 100644 index 000000000..db005b4c7 --- /dev/null +++ b/demos/functional/datepicker/demo/img/au.gif diff --git a/demos/functional/datepicker/demo/img/br.gif b/demos/functional/datepicker/demo/img/br.gif Binary files differnew file mode 100644 index 000000000..8b8bf147d --- /dev/null +++ b/demos/functional/datepicker/demo/img/br.gif diff --git a/demos/functional/datepicker/demo/img/calendar.gif b/demos/functional/datepicker/demo/img/calendar.gif Binary files differnew file mode 100644 index 000000000..d0abaa7c0 --- /dev/null +++ b/demos/functional/datepicker/demo/img/calendar.gif diff --git a/demos/functional/datepicker/demo/img/calendar2.gif b/demos/functional/datepicker/demo/img/calendar2.gif Binary files differnew file mode 100644 index 000000000..519a1fd4a --- /dev/null +++ b/demos/functional/datepicker/demo/img/calendar2.gif diff --git a/demos/functional/datepicker/demo/img/cn.gif b/demos/functional/datepicker/demo/img/cn.gif Binary files differnew file mode 100644 index 000000000..5482753d6 --- /dev/null +++ b/demos/functional/datepicker/demo/img/cn.gif diff --git a/demos/functional/datepicker/demo/img/dark-bg.gif b/demos/functional/datepicker/demo/img/dark-bg.gif Binary files differnew file mode 100644 index 000000000..1dea48a8f --- /dev/null +++ b/demos/functional/datepicker/demo/img/dark-bg.gif diff --git a/demos/functional/datepicker/demo/img/hover-bg.gif b/demos/functional/datepicker/demo/img/hover-bg.gif Binary files differnew file mode 100644 index 000000000..fbf94fc2c --- /dev/null +++ b/demos/functional/datepicker/demo/img/hover-bg.gif diff --git a/demos/functional/datepicker/demo/img/id.gif b/demos/functional/datepicker/demo/img/id.gif Binary files differnew file mode 100644 index 000000000..d7f4ab8a3 --- /dev/null +++ b/demos/functional/datepicker/demo/img/id.gif diff --git a/demos/functional/datepicker/demo/img/ie.gif b/demos/functional/datepicker/demo/img/ie.gif Binary files differnew file mode 100644 index 000000000..827c498d2 --- /dev/null +++ b/demos/functional/datepicker/demo/img/ie.gif diff --git a/demos/functional/datepicker/demo/img/ke.gif b/demos/functional/datepicker/demo/img/ke.gif Binary files differnew file mode 100644 index 000000000..e352177c7 --- /dev/null +++ b/demos/functional/datepicker/demo/img/ke.gif diff --git a/demos/functional/datepicker/demo/img/lb.gif b/demos/functional/datepicker/demo/img/lb.gif Binary files differnew file mode 100644 index 000000000..f204918fe --- /dev/null +++ b/demos/functional/datepicker/demo/img/lb.gif diff --git a/demos/functional/datepicker/demo/img/next.gif b/demos/functional/datepicker/demo/img/next.gif Binary files differnew file mode 100644 index 000000000..be0959b1b --- /dev/null +++ b/demos/functional/datepicker/demo/img/next.gif diff --git a/demos/functional/datepicker/demo/img/normal-bg.gif b/demos/functional/datepicker/demo/img/normal-bg.gif Binary files differnew file mode 100644 index 000000000..bdb506869 --- /dev/null +++ b/demos/functional/datepicker/demo/img/normal-bg.gif diff --git a/demos/functional/datepicker/demo/img/nz.gif b/demos/functional/datepicker/demo/img/nz.gif Binary files differnew file mode 100644 index 000000000..86b89cb27 --- /dev/null +++ b/demos/functional/datepicker/demo/img/nz.gif diff --git a/demos/functional/datepicker/demo/img/prev.gif b/demos/functional/datepicker/demo/img/prev.gif Binary files differnew file mode 100644 index 000000000..95d840f47 --- /dev/null +++ b/demos/functional/datepicker/demo/img/prev.gif diff --git a/demos/functional/datepicker/demo/img/se.gif b/demos/functional/datepicker/demo/img/se.gif Binary files differnew file mode 100644 index 000000000..7301c598e --- /dev/null +++ b/demos/functional/datepicker/demo/img/se.gif diff --git a/demos/functional/datepicker/demo/img/tab.png b/demos/functional/datepicker/demo/img/tab.png Binary files differnew file mode 100644 index 000000000..01c8ab417 --- /dev/null +++ b/demos/functional/datepicker/demo/img/tab.png diff --git a/demos/functional/datepicker/demo/img/us.gif b/demos/functional/datepicker/demo/img/us.gif Binary files differnew file mode 100644 index 000000000..39c472e26 --- /dev/null +++ b/demos/functional/datepicker/demo/img/us.gif diff --git a/demos/functional/datepicker/demo/img/za.gif b/demos/functional/datepicker/demo/img/za.gif Binary files differnew file mode 100644 index 000000000..197cbd888 --- /dev/null +++ b/demos/functional/datepicker/demo/img/za.gif diff --git a/demos/functional/datepicker/demo/jquery.localisation.js b/demos/functional/datepicker/demo/jquery.localisation.js new file mode 100644 index 000000000..b11e37835 --- /dev/null +++ b/demos/functional/datepicker/demo/jquery.localisation.js @@ -0,0 +1,64 @@ +/* http://keith-wood.name/localisation.html + Localisation assistance for jQuery v1.0.2. + Written by Keith Wood (kbwood@iprimus.com.au) June 2007. + Under the Creative Commons Licence http://creativecommons.org/licenses/by/3.0/ + Share or Remix it but please Attribute the author. */ + +(function($) { // Hide scope, no $ conflict + +/* Load applicable localisation package(s) for one or more jQuery packages. + Assumes that the localisations are named <base>-<lang>.js + and loads them in order from least to most specific. + For example, $.localise('jquery-calendar'); + with the browser set to 'en-US' would attempt to load + jquery-calendar-en.js and jquery-calendar-en-US.js. + Also accepts an array of package names to process. + Optionally specify whether or not to include the base file, + the desired language, and/or the timeout period, e.g. + $.localise(['jquery-calendar', 'jquery-timeentry'], + {loadBase: true; language: 'en-AU', timeout: 300}); */ +$.localise = function(pkg, settings) { + var saveSettings = {async: $.ajaxSettings.async, timeout: $.ajaxSettings.timeout}; + $.ajaxSetup({async: false, timeout: (settings && settings.timeout ? settings.timeout : 500)}); + var localiseOne = function(pkg, lang) { + if (settings && settings.loadBase) { + $.getScript(pkg + '.js'); + } + if (lang.length >= 2) { + $.getScript(pkg + '-' + lang.substring(0, 2) + '.js'); + } + if (lang.length >= 5) { + $.getScript(pkg + '-' + lang.substring(0, 5) + '.js'); + } + }; + var lang = normaliseLang(settings && settings.language ? settings.language : $.defaultLanguage); + if (isArray(pkg)) { + for (i = 0; i < pkg.length; i++) { + localiseOne(pkg[i], lang); + } + } + else { + localiseOne(pkg, lang); + } + $.ajaxSetup(saveSettings); +}; + +/* Retrieve the default language set for the browser. */ +$.defaultLanguage = normaliseLang(navigator.language ? navigator.language /* Mozilla */ : + navigator.userLanguage /* IE */); + +/* Ensure language code is in the format aa-AA. */ +function normaliseLang(lang) { + lang = lang.replace(/_/, '-').toLowerCase(); + if (lang.length > 3) { + lang = lang.substring(0, 3) + lang.substring(3).toUpperCase(); + } + return lang; +} + +/* Determine whether an object is an array. */ +function isArray(a) { + return (a.constructor && a.constructor.toString().match(/\Array\(\)/)); +} + +})(jQuery); diff --git a/demos/functional/datepicker/demo/ui.datepicker.alt.css b/demos/functional/datepicker/demo/ui.datepicker.alt.css new file mode 100644 index 000000000..d07a6e7bf --- /dev/null +++ b/demos/functional/datepicker/demo/ui.datepicker.alt.css @@ -0,0 +1,158 @@ +/* Alternate UI date picker styles */ +#ui-datepicker-div, .ui-datepicker-inline { + font-family: Arial, Helvetica, sans-serif; + font-size: 14px; + padding: 0; + margin: 0; + background: #d8d8d8 url(../img/dark-bg.gif) repeat; + color: #008; + width: 220px; +} +#ui-datepicker-div { + display: none; + border: 1px solid #008; + z-index: 9999; /*must have*/ +} +.ui-datepicker-inline { + float: left; + display: block; + border: 0; +} +.ui-datepicker-dialog { + padding: 5px !important; + border: 4px ridge #88c !important; +} +button.ui-datepicker-trigger { + width: 25px; +} +img.ui-datepicker-trigger { + margin: 2px; + vertical-align: middle; +} +.ui-datepicker-prompt { + float: left; + padding: 2px; + xbackground: #d8d8d8 url(../img/dark-bg.gif) repeat; + background: transparent; + color: #008; +} +* html .ui-datepicker-prompt { + width: 185px; +} +.ui-datepicker-control, .ui-datepicker-links, .ui-datepicker-header, .ui-datepicker { + clear: both; + float: left; + width: 100%; +} +.ui-datepicker-control, .ui-datepicker-links { + font-weight: bold; + font-size: 80%; + letter-spacing: 1px; +} + +.ui-datepicker-links label { /* disabled links */ + padding: 2px 5px; + color: #88c; +} +.ui-datepicker-clear, .ui-datepicker-prev { + float: left; + width: 34%; +} +.ui-datepicker-current { + float: left; + width: 30%; + text-align: center; +} +.ui-datepicker-close, .ui-datepicker-next { + float: right; + width: 34%; + text-align: right; +} +.ui-datepicker-header { + padding: 1px 0 3px; + + text-align: center; + font-weight: bold; + height: 1.3em; +} +.ui-datepicker-header select { + background: #d8d8d8 url(../img/dark-bg.gif) repeat; + color: #008; + border: 0px; + font-weight: bold; +} +.ui-datepicker { + background: #f8f8f8 url(../img/normal-bg.gif) repeat; + color: #008; + text-align: center; + font-size: 100%; +} +.ui-datepicker a { + display: block; + width: 100%; +} +.ui-datepicker-titleRow { + background: #d8d8d8 url(../img/dark-bg.gif) repeat; +} +.ui-datepicker-weekEndCell { + background: #d8d8d8 url(../img/dark-bg.gif) repeat; +} +.ui-datepicker-daysCellOver { + background: #3c75c4 url(../img/active-bg.gif) repeat; +} +.ui-datepicker-unselectable { + color: #88c; +} +.ui-datepicker-today { + font-weight: bold; +} +.ui-datepicker-currentDay { + background: #3c75c4 url(../img/active-bg.gif) repeat; +} + +/* ________ CALENDAR LINKS _______ + +** Reset link properties and then override them with !important */ +#ui-datepicker-div a, .ui-datepicker-inline a { + cursor: pointer; + margin: 0; + padding: 0; + background: none; + color: #000; +} +.ui-datepicker-control a, .ui-datepicker-links a { + padding: 2px 5px !important; +} +.ui-datepicker-control a:hover { + background: #9dbae1 url(../img/hover-bg.gif) repeat !important; +} +.ui-datepicker-links a:hover, .ui-datepicker-titleRow a:hover { + background: #9dbae1 url(../img/hover-bg.gif) repeat !important; +} + +/* ___________ MULTIPLE MONTHS _________*/ + +.ui-datepicker-multi .datepicker { + border: 1px solid #008; +} +.ui-datepicker-oneMonth { + float: left; + width: 220px; +} +.ui-datepicker-newRow { + clear: left; +} + +/* ___________ IE6 IFRAME FIX ________ */ + +.ui-datepicker-cover { + display: none; /*sorry for IE5*/ + display/**/: block; /*sorry for IE5*/ + position: absolute; /*must have*/ + z-index: -1; /*must have*/ + filter: mask(); /*must have*/ + top: -4px; /*must have*/ + left: -4px; /*must have*/ + width: 200px; /*must have*/ + height: 200px; /*must have*/ +}
\ No newline at end of file diff --git a/demos/functional/datepicker/demo/ui.datepicker.demo.css b/demos/functional/datepicker/demo/ui.datepicker.demo.css new file mode 100644 index 000000000..2920d857f --- /dev/null +++ b/demos/functional/datepicker/demo/ui.datepicker.demo.css @@ -0,0 +1,53 @@ +#tab_menu1 { margin:0.5em 0 0 0; padding:0; font-size:1em; } +.tab_group1 { clear:left; padding-top:0; display:none; } +.demoLabel { float: left; width: 18em; } +.ar_day { color: white !important; background: #eee url(img/ar.gif) no-repeat center !important; } +.au_day { color: blue !important; background: #eee url(img/au.gif) no-repeat center !important; } +.br_day { color: green !important; background: #eee url(img/br.gif) no-repeat center !important; } +.cn_day { color: red !important; background: #eee url(img/cn.gif) no-repeat center !important; } +.id_day { color: white !important; background: #eee url(img/id.gif) no-repeat center !important; } +.ie_day { color: white !important; background: #eee url(img/ie.gif) no-repeat center !important; } +.ke_day { color: red !important; background: #eee url(img/ke.gif) no-repeat center !important; } +.lb_day { color: white !important; background: #eee url(img/lb.gif) no-repeat center !important; } +.nz_day { color: blue !important; background: #eee url(img/nz.gif) no-repeat center !important; } +.se_day { color: blue !important; background: #eee url(img/se.gif) no-repeat center !important; } +.us_day { color: white !important; background: #eee url(img/us.gif) no-repeat center !important; } +.za_day { color: green !important; background: #eee url(img/za.gif) no-repeat center !important; } +code { font-size: 13px; font-family: Verdana, Arial, Helvetica, sans-serif; } +pre { clear: both; padding-left: 2em; background: #eee; } +#embedButton { width: 7em; } +#embedButton + img { position: relative; left: -21px; top: -1px; } +.tabs { + list-style: none; +} +.tabs li { + float: left; +} +.tabs li a { + display:block; + padding: 0.4em .75em; + margin: 0; + border-left: 1px solid #fff; + border-right: 1px solid #ddd; + cursor: pointer; + cursor: hand; + text-decoration: none; + color: #eee; + border-top: 1px solid #F9F9F9; + background: #78A5CE; +} +.tabs li a:hover, .tabs li a.over { + border-top: 1px solid #000; + background: #333; +} +.tab_group1 h3 { + font-weight: bold; + margin-top:15px; + border-bottom: 1px solid #ddd; +} +.nextFeature { + margin-top: 15px; +} +ol li { + margin-top: 1em; +}
\ No newline at end of file diff --git a/demos/functional/datepicker/demo/ui.datepicker.demo.js b/demos/functional/datepicker/demo/ui.datepicker.demo.js new file mode 100644 index 000000000..3d7d9b640 --- /dev/null +++ b/demos/functional/datepicker/demo/ui.datepicker.demo.js @@ -0,0 +1,81 @@ +// Initialise the date picker demonstrations +$(document).ready(function () { + // initialize tab interface + tabs.init(); + // reset defaults to English + $.datepicker.setDefaults($.datepicker.regional['']); + // replace script tags with HTML code + $(".demojs").each(function () { + $(this).before( '<pre><code class="javascript">' + + $(this).html().replace(/</g, '<') + "</code></pre>" ); + eval( $(this).html() ); + }); + // Localization + if ($.browser.safari) + $('.languageSelect,.l10nDatepicker,#frFullFormat').attr({ disabled: 'disabled' }); + else + $('.languageSelect').change(localise); + // Stylesheets + $('#altStyle').datepicker({buttonImage: 'demo/img/calendar2.gif', + prevText: '<img src="demo/img/prev.gif" style="vertical-align: middle;"/> Prev', + nextText: 'Next <img src="demo/img/next.gif" style="vertical-align: middle;"/>'}); + $('#button3').click(function() { + $(this).datepicker('dialog', $('#altDialog').val(), + setAltDateFromDialog, {prompt: 'Choose a date', speed: '', + prevText: '<img src="demo/img/prev.gif" style="vertical-align: middle;"/> Prev', + nextText: 'Next <img src="demo/img/next.gif" style="vertical-align: middle;"/>'}); + }); +}); + +// Load and apply a localisation package for the date picker +function localise() { + var input = $('input', this.parentNode.parentNode); + var date = $(input).datepicker('getDate'); + var language = $(this).val(); + $.localise('../../../source/i18n/ui.datepicker', {language: language}); + $(input).datepicker('change', $.datepicker.regional[language]); + $.datepicker.setDefaults($.datepicker.regional['']); // Reset for general usage + if (date) { + $(input).datepicker('setDate', date); + input.val($.datepicker.formatDate( + $.datepicker.regional[language].dateFormat, date)); + } +} + +// Demonstrate a callback from inline configuration +function showDay(input) { + var date = $(input).datepicker('getDate'); + $('#inlineDay').html(date ? $.datepicker.formatDate('DD', date) : 'blank'); +} + +// Display a date selected in a "dialog" +function setAltDateFromDialog(date) { + $('#altDialog').val(date); +} + +// Custom Tabs written by Marc Grabanski +var tabs = +{ + init : function () + { + // Setup tabs + $("div[@class^=tab_group]").hide(); + $("div[@class^=tab_group]:first").show().id; + $("ul[@id^=tab_menu] a:eq(0)").addClass('over'); + + // Slide visible up and clicked one down + $("ul[@id^=tab_menu] a").each(function(i){ + $(this).click(function () { + $("ul[@id^=tab_menu] a.over").removeClass('over'); + $(this).addClass('over'); + $("div[@class^=tab_group]:visible").hide(); + $( $(this).attr("href") ).fadeIn(); + tabs.stylesheet = $(this).attr("href") == "#styles" ? 'alt' : 'default'; + $('link').each(function() { + this.disabled = (this.title != '' && this.title != tabs.stylesheet); + }); + return false; + }); + }); + } +} diff --git a/demos/functional/datepicker/index.html b/demos/functional/datepicker/index.html new file mode 100644 index 000000000..4b28d7e3a --- /dev/null +++ b/demos/functional/datepicker/index.html @@ -0,0 +1,887 @@ +<!DOCTYPE html + PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> + <head> + <title>jQuery UI Datepicker</title> + + <!-- Include UI Datepicker CSS --> + <link rel="stylesheet" href="../../../themes/ui.datepicker.css" type="text/css" media="screen" title="default" charset="utf-8"> + + <!-- Include Demo Stylesheets --> + <link rel="stylesheet" type="text/css" href="demo/ui.datepicker.alt.css" title="alt" id="alt" disabled="disabled"/> + <link rel="stylesheet" type="text/css" href="demo/ui.datepicker.demo.css" /> + + </head> + <body> + <div id="wrap"> + <div id="content"> + <ul id="tab_menu1" class="tabs"> + <li><a href="#default">Defaults</a></li> + <li><a href="#invoke">Invocation</a></li> + <li><a href="#keys">Keystrokes</a></li> + <li><a href="#restrict">Restricting</a></li> + <li><a href="#formats">Formats</a></li> + <li><a href="#custom">Customize</a></li> + <li><a href="#l10n">Localisation</a></li> + <li style="clear: left;"><a href="#range">Date range</a></li> + <li><a href="#misc1">Misc. 1</a></li> + <li><a href="#misc2">Misc. 2</a></li> + <li><a href="#change">Change Settings</a></li> + <li><a href="#inline">Inline</a></li> + <li><a href="#styles">Stylesheets</a></li> + <li><a href="#compat">Compatibility</a></li> + </ul> + <div style="clear:left"></div> + <div id="default" class="tab_group1 container" style="display:block"> + <h3>Defaults</h3> + <p>A date picker can easily be added to an input field with default settings.</p> + <p><span class="demoLabel">Default date picker:</span> + <input type="text" size="30" value="click to show datepicker" id="defaultFocus"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#defaultFocus').datepicker(); +</script> + <p><span class="demoLabel">IE select issue:</span> + <select><option>Show how the date picker covers a select in IE</option></select></p> + <p>The defaults are:</p> + <ul> + <li>Date picker appears on focus</li> + <li>Text is in English</li> + <li>Date format is mm/dd/yyyy</li> + <li><em>Clear</em>/<em>Close</em> controls show at the top</li> + <li>Month and year are selectable directly</li> + <li>10 years before and after the selected 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> + <p>Processed fields are marked with a class of <code>hasDatepicker</code> + and are not re-processed if targetted a second time.</p> + <p>You can override the default settings that apply to all date picker instances.</p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$.datepicker.setDefaults({showOn: 'both', buttonImageOnly: true, + buttonImage: 'demo/img/calendar.gif', buttonText: 'Calendar'}); +</script> + </div> + <div id="invoke" class="tab_group1 container"> + <h3>Invocation</h3> + <p>The date picker can be invoked in a variety of ways, as shown below. + Also shown is the use of an image only trigger, + and how the controls and buttons appear when disabled.</p> + <p><span class="demoLabel">Datepicker appears on focus:</span> + <input type="text" size="10" id="invokeFocus"/> + <input type="button" id="enableFocus" value="Disable"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#invokeFocus').datepicker({showOn: 'focus'}); +</script> + <p><span class="demoLabel">Appears via text button:</span> + <input type="text" size="10" id="invokeButton"/> + <input type="button" id="enableButton" value="Disable"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#invokeButton').datepicker({showOn: 'button', buttonText: '...', + buttonImage: '', buttonImageOnly: false}); +</script> + <p style="clear:both"><span class="demoLabel">Appears both ways:</span> + <input type="text" size="10" class="invokeBoth"/> + <input type="button" id="enableBoth" value="Disable"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('.invokeBoth').datepicker({showOn: 'both', buttonImage: 'demo/img/calendar.gif', buttonImageOnly: true}); +</script> + <p>You can embed the trigger image within the input area via CSS.</p> + <p style="clear:both"><span class="demoLabel">Embedded button:</span> + <input type="text" size="10" id="embedButton"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#embedButton').datepicker({showOn: 'button', buttonImage: 'demo/img/calendar.gif', buttonImageOnly: true}); + +// CSS +// #embedButton + img { position: relative; left: -21px; top: -1px; } +</script> + <p>Enable and disable datepicker with 'enable' and 'disable' commands.</p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#enableFocus').toggle( + function () { this.value = 'Enable'; $('#invokeFocus').datepicker('disable'); }, + function () { this.value = 'Disable'; $('#invokeFocus').datepicker('enable'); }); +$('#enableButton').toggle( + function () { this.value = 'Enable'; $('#invokeButton').datepicker('disable'); }, + function () { this.value = 'Disable'; $('#invokeButton').datepicker('enable'); }); +$('#enableBoth').toggle( + function () { this.value = 'Enable'; $('.invokeBoth:first').datepicker('disable'); }, + function () { this.value = 'Disable'; $('.invokeBoth:first').datepicker('enable'); }); +</script> + <p>The date picker can also be triggered externally for a particular input.</p> + <p><span class="demoLabel">External trigger:</span> + <button id="button1">Open date picker</button></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#button1').click(function() { + $('#invokeFocus').datepicker('show'); +}); +</script> + <p>Or even opened as a "dialog". If the <em>blockUI</em> plugin is available, + it is used to create a modal dialog.</p> + <p><span class="demoLabel">Date picker dialog:</span> + <input type="text" size="10" id="invokeDialog" readonly="readonly"/> + <button id="button2">Open dialog</button></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#button2').click(function() { + $(this).datepicker('dialog', $('#invokeDialog').val(), + setDateFromDialog, {prompt: 'Choose a date', speed: ''}); +}); + +// Display a date selected in a "dialog" +function setDateFromDialog(date) { + $('#invokeDialog').val(date); +} +</script> + </div> + <div id="keys" class="tab_group1 container"> + <h3>Keystrokes</h3> + <p>The date picker also responds to keystrokes entered in the input field.</p> + <p><span class="demoLabel">Keyboard driven:</span> + <input type="text" size="10" class="invokeBoth"/></p> + <p>The relevant keystrokes are:</p> + <ul> + <li><span class="demoLabel">page up/down</span>previous/next month</li> + <li><span class="demoLabel">ctrl+page up/down</span>previous/next year</li> + <li><span class="demoLabel">ctrl+home</span>current month or open when closed</li> + <li><span class="demoLabel">ctrl+left/right</span>previous/next day</li> + <li><span class="demoLabel">ctrl+up/down</span>previous/next week</li> + <li><span class="demoLabel">enter</span>accept the selected date</li> + <li><span class="demoLabel">ctrl+end</span>close and erase the date</li> + <li><span class="demoLabel">escape</span>close the date picker without selection</li> + </ul> + </div> + <div id="restrict" class="tab_group1 container"> + <h3>Restricting</h3> + <p>You can restrict the functionality of the date picker in various ways. + The first example sets the first day of the week to Monday and prevents it from being + changed, as well as preventing the month and year from being selected directly.</p> + <p><span class="demoLabel">Restricted functionality:</span> + <input type="text" size="10" id="restrictControls"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#restrictControls').datepicker({firstDay: 1, changeFirstDay: false, + changeMonth: false, changeYear: false}); +</script> + <p>You can also limit the range of dates selectable within the date picker. + Here it's between 26-Jan-05 and 26-Jan-07.</p> + <p><span class="demoLabel">Limited dates:</span> + <input type="text" size="10" id="restrictDates"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#restrictDates').datepicker({minDate: new Date(2005, 1 - 1, 26), + maxDate: new Date(2007, 1 - 1, 26)}); +</script> + <p>Or set a range relative to today by specifying a number + rather than an exact date, in this case in the coming year.</p> + <p><span class="demoLabel">Limited dates (relative):</span> + <input type="text" size="10" id="relativeDates"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#relativeDates').datepicker({minDate: 0, maxDate: 365}); +</script> + <p>The relative dates can also be specified as a number and a period - + 'd' for days, 'w' for weeks, 'm' for months, or 'y' for years.</p> + <p><span class="demoLabel">Limited dates (extended):</span> + <input type="text" size="10" id="extendedDates"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#extendedDates').datepicker({minDate: '-1d', maxDate: '6y'}); +</script> + <p>Note that the range of selectable months and years changes appropriately. Also, + note that the <em>Today</em> link is no longer available as today is not in the range. + By default, the <em>Prev</em> and <em>Next</em> links are disabled if they are not + applicable. You can override this to remove them instead, with the + <code>hideIfNoPrevNext</code> setting.</p> + </div> + <div id="formats" class="tab_group1 container"> + <h3>Date Formats</h3> + <p>You can set a variety of date formats for the date picker, + with the default being 'mm/dd/yy'.</p> + <p><span class="demoLabel">Medium format:</span> + <input type="text" size="10" id="mediumFormat"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#mediumFormat').datepicker({dateFormat: 'M d, yy'}); +</script> + <p><span class="demoLabel">Long format:</span> + <input type="text" size="20" id="longFormat"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#longFormat').datepicker({dateFormat: 'MM d, yy'}); +</script> + <p><span class="demoLabel">Full format:</span> + <input type="text" size="30" id="fullFormat"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#fullFormat').datepicker({dateFormat: 'DD, MM d, yy'}); +</script> + <p>Display dates without the century. The century is then determined based on the + <code>shortYearCutoff</code> setting, which defaults to 10 years in the future ('+10'). + Year values less than or equal to this cutoff are interpreted as being in the current + century, while those greater than the cutoff are taken to be in the previous century.</p> + <p><span class="demoLabel">No century:</span> + <input type="text" size="10" id="noCentury"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#noCentury').datepicker({dateFormat: 'dd/mm/y'}); +</script> + <p><span class="demoLabel">ISO date format:</span> + <input type="text" size="10" id="isoFormat"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#isoFormat').datepicker({dateFormat: 'yy-mm-dd'}); +</script> + <p><span class="demoLabel">French full format:</span> + <input type="text" size="30" id="frFullFormat"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#frFullFormat').datepicker($.datepicker.regional['fr']); +$('#frFullFormat').datepicker('change', {dateFormat: 'DD, MM d, yy'}); +</script> + <p>The formatting codes are:</p> + <ul> + <li><span class="demoLabel">d</span>day of month (no leading zero)</li> + <li><span class="demoLabel">dd</span>day of month (two digit)</li> + <li><span class="demoLabel">D</span>day name short</li> + <li><span class="demoLabel">DD</span>day name long</li> + <li><span class="demoLabel">m</span>month of year (no leading zero)</li> + <li><span class="demoLabel">mm</span>month of year (two digit)</li> + <li><span class="demoLabel">M</span>month name short</li> + <li><span class="demoLabel">MM</span>month name long</li> + <li><span class="demoLabel">y</span>year (two digit)</li> + <li><span class="demoLabel">yy</span>year (four digit)</li> + <li><span class="demoLabel">'...'</span>literal text</li> + <li><span class="demoLabel">''</span>single quote</li> + </ul> + </div> + <div id="custom" class="tab_group1 container"> + <h3>Customize</h3> + <p>You can customize the selectability and/or appearance of individual days + by setting a callback function that accepts a date and returns an array + with the first entry being true/false for selectability and the second + entry being a CSS class to apply (or '' for none). One appropriate + function is built-in that prevents the selection of days on weekends.</p> + <p><span class="demoLabel">No weekends:</span> + <input type="text" size="10" id="noWeekends"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#noWeekends').datepicker({beforeShowDay: $.datepicker.noWeekends}); +</script> + <p>Or you can provide your own function. The one below highlights and + prevents selection of a set of national days.</p> + <p><span class="demoLabel">National days:</span> + <input type="text" size="10" id="nationalDays"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#nationalDays').datepicker({beforeShowDay: nationalDays}); + +// Highlight certain national days on the calendar +var natDays = [[1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'], [4, 27, 'za'], [5, 25, 'ar'], [6, 6, 'se'], + [7, 4, 'us'], [8, 17, 'id'], [9, 7, 'br'], [10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']]; + +function nationalDays(date) { + for (i = 0; i < natDays.length; i++) { + if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) { + return [false, natDays[i][2] + '_day']; + } + } + return [true, '']; +} +</script> + <p>With CSS like the following:</p> +<pre><code>.au_day { color: blue !important; background: #eee url(au.gif) no-repeat center !important; }</code></pre> + </div> + <div id="l10n" class="tab_group1 container"> + <h3>Localisation</h3> + <p>You can localise the date picker for other languages and regional differences. + The date picker defaults to English with a date format of MM/DD/YYYY, + but you can easily translate the text into another language and date format.</p> + <p><span class="demoLabel"> + <select class="languageSelect"> + <option value="zh-CN">简体中文 (Chinese Simplified)</option> + <option value="zh-TW">簡體中文 (Chinese Traditional)</option> + <option value="bg">български език (Bulgarian)</option> + <option value="ca">Català (Catalan)</option> + <option value="cs">Čeština (Czech)</option> + <option value="da">Dansk (Danish)</option> + <option value="de">Deutsch (German)</option> + <option value="es">Español (Spanish)</option> + <option value="fr" selected="selected">Français (French)</option> + <option value="ko">한국어 (Korean)</option> + <option value="is">Íslenska (Icelandic)</option> + <option value="it">Italiano (Italian)</option> + <option value="hu">Magyar (Hungarian)</option> + <option value="nl">Nederlands (Dutch)</option> + <option value="ja">日本語 (Japanese)</option> + <option value="lt">lietuvių kalba (Lithuanian)</option> + <option value="no">Norsk (Norwegian)</option> + <option value="th">Phasa thai (Thai)</option> + <option value="pl">Polski (Polish)</option> + <option value="pt-BR">Português (Portuguese)</option> + <option value="ro">Română (Romanian)</option> + <option value="ru">Русский (Russian)</option> + <option value="sk">Slovenčina (Slovak)</option> + <option value="fi">suomi (Finnish)</option> + <option value="sv">Svenska (Swedish)</option> + <option value="tr">Türkçe (Turkish)</option> + </select>:</span> + <input type="text" size="10" id="l10nDatepicker"/></p> + <p>The presentation is slightly different for right-to-left languages.</p> + <p><span class="demoLabel"> + <select class="languageSelect"> + <option value="he" selected="selected">עברית (Hebrew)</option> + </select>:</span> + <input type="text" size="10" id="rtlDatepicker"/></p> + <p>You need to load the appropriate language package, which + adds a language set ($.datepicker.regional[langCode]) and + automatically sets this language as the default for all date pickers.</p> +<pre><code class="html"><script type="text/javascript" src="ui.datepicker-fr.js"></script></code></pre> + <p>Thereafter, if desired, you can restore the original language settings.</p> +<pre><code class="javascript">$.datepicker.setDefaults($.datepicker.regional['']);</code></pre> + <p>And then configure the language per date picker instance.</p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#l10nDatepicker').datepicker($.extend({showStatus: true}, $.datepicker.regional['fr'])); +$('#rtlDatepicker').datepicker($.extend({showStatus: true}, $.datepicker.regional['he'])); +</script> + <p><strong>Localisation packages:</strong></p> + <p>Localisation packages can be found below under <a href="#documentation">Settings and Documentation</a>.</p> + </div> + <div id="range" class="tab_group1 container"> + <h3>Date Range</h3> + <p>Use a custom field settings function to create a date range control: + two date fields, each restricting the other. The function takes an + input field as an argument and returns a settings object (anonymous).</p> + <p><span class="demoLabel">Date range:</span> + <input type="text" size="10" class="dateRange" id="dFrom"/> to + <input type="text" size="10" class="dateRange" id="dTo"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('.dateRange').datepicker({beforeShow: customRange}); + +// Customize two date pickers to work as a date range +function customRange(input) { + return {minDate: (input.id == 'dTo' ? $('#dFrom').datepicker('getDate') : null), + maxDate: (input.id == 'dFrom' ? $('#dTo').datepicker('getDate') : null)}; +} +</script> + <p>Select a date range on one date picker, first click is the start date and second click is the end date. + The last example show six months in two rows of three months + with <i>Previous</i> and <i>Next</i> moving three months at a time.</p> + <p><span class="demoLabel">Date range:</span> + <input type="text" size="25" id="rangeSelect"/></p> + +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#rangeSelect').datepicker({rangeSelect: true}); +</script> + <p><span class="demoLabel">Two months with range select:</span> + <input type="text" size="25" id="rangeSelect2Months"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#rangeSelect2Months').datepicker({rangeSelect: true, numberOfMonths: 2}); +</script> + <p><span class="demoLabel">Six months with range select:</span> + <input type="text" size="25" id="rangeSelect6Months"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#rangeSelect6Months').datepicker({rangeSelect: true, numberOfMonths: [2, 3], + stepMonths: 3, prevText: '<< Previous Months', nextText: 'Next Months >>'}); +</script> + </div> + <div id="misc1" class="tab_group1 container"> + <h3>Miscellaneous 1</h3> + <p>Set the date shown when first opening the date picker. The default is today.</p> + <p><span class="demoLabel">Open at 01-Jan-2007:</span> + <input type="text" size="10" id="openDateJan01"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#openDateJan01').datepicker({defaultDate: new Date(2007, 1 - 1, 1)}); +</script> + <p><span class="demoLabel">Open at 7 days from today:</span> + <input type="text" size="10" id="openDatePlus7"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#openDatePlus7').datepicker({defaultDate: +7}); +</script> + <p>Or specify a period from today - 'd' for days, + 'w' for weeks, 'm' for months, or 'y' for years.</span> + <p><span class="demoLabel">Open at 2 weeks from today:</span> + <input type="text" size="10" id="openDate2Weeks"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#openDate2Weeks').datepicker({defaultDate: '2w'}); +</script> + <p>Show the weeks of the year. Defaults to the ISO 8601 definition (weeks start + on Mondays and the first week of the year contains January 4). Change the + week calculation by setting <code>calculateWeek</code> to a function that + takes a date as a parameter and returns the number of the week.</p> + <p><span class="demoLabel">Show week of the year:</span> + <input type="text" size="10" id="showWeeks"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#showWeeks').datepicker({showWeeks: true, firstDay: 1, changeFirstDay: false, showOtherMonths: true}); +</script> + <p>Additional settings let you move the <em>Clear</em>/<em>Close</em> controls + to the bottom, hide the <em>Clear</em> control to make the date mandatory, + display the days in other months (non-selectable), + and show a status bar (with a custom display for today). + Callback functions are also added to operate when a date + is selected and when the datepicker is closed. + If no <code>onSelect</code> callback is specified, the + <code>onchange</code> event of the input field is triggered.</p> + <p><span class="demoLabel">Additional settings:</span> + <input type="text" size="10" id="addSettings"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#addSettings').datepicker({ + closeAtTop: false, + mandatory: true, + showOtherMonths: true, + showStatus: true, + statusForDate: highlightToday, + onSelect: alertDate, // invoke alertDate function + onClose: function(date) { alert('Closed with ' + date); } +}); + +// Demonstrate the callback on select +function alertDate(date) { + alert('The date is ' + date); +} + +// Demonstrate the callback for date status +function highlightToday(date, inst) { + var today = new Date(); + today = new Date(today.getFullYear(), today.getMonth(), today.getDate()); + return $.datepicker.dateStatus(date, inst) + + (today.getTime() == date.getTime() ? ' (today)' : ''); +} +</script> + </div> + <div id="misc2" class="tab_group1 container"> + <h3>Miscellaneous 2</h3> + <p>Hide the datepicker on demand (press <em>alt-h</em> here) or + remove the datepicker altogether if you've finished with it.</p> + <p><span class="demoLabel">Remove popup datepicker:</span> + <input type="text" size="10" id="hideDatepicker" class="removeDatepicker"/> + <button id="removeButton">Remove</button></p> + <p><span class="demoLabel">Remove inline datepicker:</span> + <span class="removeDatepicker"></span></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +var opts = {beforeShowDay: $.datepicker.noWeekends}; +$('.removeDatepicker').datepicker(opts); +$('#hideDatepicker').keypress(function(e) { + if (e.altKey && (e.charCode || e.keyCode) == 104) { + $('#hideDatepicker').datepicker('hide'); + } +}); +$('#removeButton').toggle(function() { + $(this).text('Re-attach'); + $('.removeDatepicker').datepicker('destroy'); + }, + function() { + $(this).text('Remove'); + $('.removeDatepicker').datepicker(opts); + } +); +</script> + <p><strong>(Advanced Technique)</strong><br />Connect the date picker to linked drop-downs. You still need an input field, + but it is hidden following the drop-downs.</p> + <p><span class="demoLabel">Linked drop-downs:</span> + <select id="selectMonth"><option value="01">Jan</option><option value="02">Feb</option> + <option value="03">Mar</option><option value="04">Apr</option> + <option value="05">May</option><option value="06">Jun</option> + <option value="07">Jul</option><option value="08">Aug</option> + <option value="09">Sep</option><option value="10">Oct</option> + <option value="11">Nov</option><option value="12">Dec</option></select> + <select id="selectDay"><option value="01">1</option><option value="02">2</option> + <option value="03">3</option><option value="04">4</option> + <option value="05">5</option><option value="06">6</option> + <option value="07">7</option><option value="08">8</option> + <option value="09">9</option><option value="10">10</option> + <option value="11">11</option><option value="12">12</option> + <option value="13">13</option><option value="14">14</option> + <option value="15">15</option><option value="16">16</option> + <option value="17">17</option><option value="18">18</option> + <option value="19">19</option><option value="20">20</option> + <option value="21">21</option><option value="22">22</option> + <option value="23">23</option><option value="24">24</option> + <option value="25">25</option><option value="26">26</option> + <option value="27">27</option><option value="28">28</option> + <option value="29">29</option><option value="30">30</option> + <option value="31">31</option></select> + <select id="selectYear"><option value="2001">2001</option><option value="2002">2002</option> + <option value="2003">2003</option><option value="2004">2004</option> + <option value="2005">2005</option><option value="2006">2006</option> + <option value="2007">2007</option><option value="2008">2008</option> + <option value="2009">2009</option><option value="2010">2010</option></select> + <input type="hidden" size="10" id="linkedDates" disabled="disabled"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#linkedDates').datepicker({ + minDate: new Date(2001, 1 - 1, 1), + maxDate: new Date(2010, 12 - 1, 31), + beforeShow: readLinked, + onSelect: updateLinked +}); + +// 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)); +} + +$('#selectMonth, #selectYear').change(checkLinkedDays); + +// 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); + } +} +</script> + </div> + <div id="change" class="tab_group1 container"> + <h3>Changing Settings</h3> + <p>If necessary, the datepicker settings for an input (or set of inputs) + can be changed on the fly. As an example, here we change the + animation and speed at which the datepicker appears.</p> + <p><span class="demoLabel">Display animation and speed:</span> + <select id="animSelector"> + <option value="show">show</option> + <option value="fadeIn">fade in</option> + <option value="slideDown">slide down</option> + </select> + <select id="speedSelector"> + <option value="">immediate</option> + <option value="slow">slow</option> + <option value="medium" selected="selected">medium</option> + <option value="fast">fast</option> + </select> + </p> + <p><span class="demoLabel">Change datepicker:</span> + <input type="text" size="10" id="changeDP"/></p> + <p>When the option in the select changes, the following function is called:</p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#changeDP').datepicker(); +// Change the datepicker to selected speed. +$('#animSelector,#speedSelector').change(function() { + $('#changeDP').datepicker('change', {showAnim: $('#animSelector').val(), + speed: $('#speedSelector').val()}); +}); +</script> + <p>Date pickers can also be configured inline. + Add attributes to the input control with the namespace "date:" + corresponding to the date picker properties. + The attribute values are evaluated as JavaScript.</p> + <p><span class="demoLabel">Inline configuration 1:</span> + <input type="text" size="10" class="inlineConfig" onchange="showDay(this);" + date:closeAtTop="false" date:firstDay="1" date:appendText="which is a"/> + <span id="inlineDay">blank</span></p> + <p><span class="demoLabel">Inline configuration 2:</span> + <input type="text" size="10" class="inlineConfig" + date:minDate="new Date(2007, 1 - 1, 1)" date:maxDate="new Date(2007, 12 - 1, 31)"/></p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +/* HTML Markup for inline configuration + +Example #1: +<input type="text" size="10" class="inlineConfig" onchange="showDay(this);" + date:closeAtTop="false" date:firstDay="1" date:appendText="which is a" /> + +Example #2: +<input type="text" size="10" class="inlineConfig" + date:minDate="new Date(2007, 1 - 1, 1)" date:maxDate="new Date(2007, 12 - 1, 31)"/> +*/ + +// Invoke inline configured datepickers +$('.inlineConfig').datepicker(); +</script> + </div> + <div id="inline" class="tab_group1 container"> + <h3>Inline</h3> + <p>The date picker can be used inline rather than as a popup. + Use inline mode by attaching the datepicker to a span or div element.</p> + <span id="inlineDemo"></span> + <div style="clear:both;height:1em"></div> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +// HTML <span id="inlineDemo"></span> +$('#inlineDemo').datepicker({ + onSelect: function(date) { + alert(date); + } +}); +</script> + <p>Show a number of months at once and set the range directly.</p> + <p>Inline range with two months:</p> + <div style="clear: both"> + <span id="rangeInline"></span> + </div> + <p style="clear: both; padding-top: 0.5em;"> + <span>Selected range is:</span> + <input type="text" size="25" id="inlineRange" readonly="readonly"/> + </p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +$('#rangeInline').datepicker({rangeSelect: true, rangeSeparator: ' to ', + numberOfMonths: 2, onSelect: updateInlineRange}); +$('#rangeInline').find('div:first').width(370); // Unfortunately not automatic + +// Display the date range from a multi-month inline date picker +function updateInlineRange(dateStr) { + var dates = $('#rangeInline').datepicker('getDate'); + var dateFormat = $.datepicker.regional[''].dateFormat; + $('#inlineRange').val(dateStr ? dateStr : + $.datepicker.formatDate(dateFormat, dates[0]) + ' to ' + + $.datepicker.formatDate(dateFormat, dates[1])); +} +</script> + <p><strong>(Advanced Technique)</strong><br /> + Set initial value of inline date range to one week before and after today's date. + Set the text field to current selected date.</p> + <p> + <button type="button" id="setInlineRange">Set Inline Range to +and- one week</button> + </p> +<script type="text/jsdemo" charset="utf-8" class="demojs"> +var nextWeek = new Date(); +nextWeek.setDate(nextWeek.getDate() + 7); + +var lastWeek = new Date(); +lastWeek.setDate(lastWeek.getDate() - 7); + +$('#setInlineRange').click(function() { + // Set Inline Date Range Selection + $('#rangeInline').datepicker('setDate', lastWeek, nextWeek); + + // Update text field with current date selections + var dates = $('#rangeInline').datepicker('getDate'); + var dateFormat = $.datepicker.regional[''].dateFormat; + $('#inlineRange').val($.datepicker.formatDate(dateFormat, dates[0]) + ' to ' + + $.datepicker.formatDate(dateFormat, dates[1])); +}); +</script> + </div> + <div id="styles" class="tab_group1 container"> + <h3>Stylesheets</h3> + <p>The date picker can be formatted through the use of a stylesheet. + The default stylesheet is used in the rest of this demo + with an alternate one used here.</p> + <p><span class="demoLabel">Alternate style:</span> + <input type="text" size="10" id="altStyle"/></p> + <p><span class="demoLabel">In a dialog:</span> + <input type="text" size="10" id="altDialog" readonly="readonly"/> + <button id="button3">Open dialog</button></p> + <p>The basic HTML structure of the date picker is shown below:</p> +<pre><code class="html"><div id="datepicker_div" class="datepicker_multi"> + <div class="datepicker_control"> + <div class="datepicker_clear"><a>Clear</a></div> + <div class="datepicker_close"><a>Close</a></div> + </div> + <div class="datepicker_links"> + <div class="datepicker_prev"><a>&lt;Prev</a></div> + <div class="datepicker_current"><a>Today</a></div> + <div class="datepicker_next"><a>Next&gt;</a></div> + </div> + <div class="datepicker_oneMonth datepicker_newRow"> + <div class="datepicker_header"> + <select class="datepicker_newMonth"></select> + <select class="datepicker_newYear"></select> + </div> + <table class="datepicker" cellpadding="0" cellspacing="0"> + <thead> + <tr class="datepicker_titleRow"> + <td><a>Su</a></td><td><a>Mo</a></td>... + </tr> + </thead> + <tbody> + <tr class="datepicker_daysRow"> + <td class="datepicker_daysCell datepicker_weekEndCell + datepicker_otherMonth datepicker_unselectable">31</td> + <td class="datepicker_daysCell"><a>1</a></td> + <td class="datepicker_daysCell datepicker_daysCellOver"><a>2</a></td> + <td class="datepicker_daysCell datepicker_daysCellOver datepicker_currentDay"><a>3</a></td> + <td class="datepicker_daysCell datepicker_today"><a>4</a></td> + ... + </tr> + ... + </tbody> + </table> + </div> + <div class="datepicker_oneMonth"> + ... + </div> + <div style="clear: both;"></div> +</div></code></pre> + </div> + <div id="compat" class="tab_group1 container"> + <h3>Compatibility</h3> + <h4>v3.3 to v3.4</h4> + <p>The jQuery UI interfaces changed again, so here's another compatibility module.</p> + <p>Users of v3.3 of the datepicker should use the following + header code to work with their existing implementation:</p> +<pre><code class="html"><link rel="stylesheet" type="text/css" href="<b>ui.datepicker.css</b>"/> +<script type="text/javascript" src="<b>ui.datepicker.js</b>"></script> +<script type="text/javascript" src="<b>ui.datepicker.compatibility-3.3.js</b>"></script></code></pre> + <p>Download the <a href="compatibility/ui.datepicker.compatibility-3.3.js" target="_blank">ui.datepicker.compatibility-3.3.js</a> module.</p> + <p>To migrate fully, the following steps need to be taken:</p> + <ul> + <li>Replace references to the <code>$(selector).attachDatepicker(...)</code> + function with <code>$(selector).datepicker(...)</code>.</li> + <li>Replace references to the <code>$(selector).removeDatepicker()</code> + function with <code>$(selector).datepicker('destroy')</code>.</li> + <li>Replace references to the <code>$(selector).datepicker.changDatepicker(...)</code> + function with <code>$(selector).datepicker('change', ...)</code>.</li> + <li>Replace references to the <code>$(selector).datepicker.enableDatepicker()</code> + function with <code>$(selector).datepicker('enable')</code>.</li> + <li>Replace references to the <code>$(selector).disableDatepicker()</code> + function with <code>$(selector).datepicker('disable')</code>.</li> + <li>Replace references to the <code>$(selector).isDisabledDatepicker()</code> + function with <code>$(selector).datepicker('isDisabled')</code>.</li> + <li>Replace references to the <code>$(selector).showDatepicker()</code> + function with <code>$(selector).datepicker('show')</code>.</li> + <li>Replace references to the <code>$.datepicker.hideDatepicker()</code> + function with <code>$(selector).datepicker('hide')</code>.</li> + <li>Replace references to the <code>$(selector).getDatepickerDate()</code> + function with <code>$(selector).datepicker('getDate')</code>.</li> + <li>Replace references to the <code>$(selector).setDatepickerDate(...)</code> + function with <code>$(selector).datepicker('setDate', ...)</code>.</li> + </ul> + <p>For example, this old style code:</p> +<pre><code class="javascript">$('inputs').<b>attachDatepicker</b>(...); +$('inputs').<b>changeDatepicker</b>(...);</code></pre> + <p>becomes:</p> +<pre><code class="javascript">$('inputs').<b>datepicker</b>(...); +$('inputs').<b>datepicker('change',</b> ...);</code></pre> + + <h4>v3.2 to v3.4</h4> + <p>To align the datepicker more closely with other jQuery UI components, + further changes were made in v3.3, resulting in another compatibility module.</p> + <p>Users of v3.2 of the datepicker should use the following + header code to work with their existing implementation:</p> +<pre><code class="html"><link rel="stylesheet" type="text/css" href="<b>ui.datepicker.css</b>"/> +<script type="text/javascript" src="<b>ui.datepicker.js</b>"></script> +<script type="text/javascript" src="<b>ui.datepicker.compatibility-3.2.js</b>"></script></code></pre> + <p>Download the <a href="compatibility/ui.datepicker.compatibility-3.2.js" target="_blank">ui.datepicker.compatibility-3.2.js</a> module.</p> + <p>To migrate fully, the following steps need to be taken:</p> + <ul> + <li>Replace references to the <code>$.datepicker.reconfigureFor(selector, ...)</code> + function with <code>$(selector).datepicker('change', ...)</code>.</li> + <li>Replace references to the <code>$.datepicker.enableFor(selector)</code> + function with <code>$(selector).datepicker('enable')</code>.</li> + <li>Replace references to the <code>$.datepicker.disableFor(selector)</code> + function with <code>$(selector).datepicker('disable')</code>.</li> + <li>Replace references to the <code>$.datepicker.isDisabled(selector)</code> + function with <code>$(selector).datepicker('isDisabled')</code>.</li> + <li>Replace references to the <code>$.datepicker.showFor(selector)</code> + function with <code>$(selector).datepicker('show')</code>.</li> + <li>Replace references to the <code>$.datepicker.getDateFor(selector)</code> + function with <code>$(selector).datepicker('getDate')</code>.</li> + <li>Replace references to the <code>$.datepicker.setDateFor(selector, ...)</code> + function with <code>$(selector).datepicker('setDate', ...)</code>.</li> + </ul> + <p>For example, this old style code:</p> +<pre><code class="javascript">$.<b>datepicker.reconfigureFor</b>('inputs', {...});</code></pre> + <p>becomes:</p> +<pre><code class="javascript">$('inputs').<b>datepicker('change',</b> {...});</code></pre> + + <h4>v2.x to v3.3</h4> + <p>The date picker has been refactored to better fit + within the <a href="http://ui.jquery.com">jQuery UI</a> project. + This has involved renaming the main function and some properties, + resulting in current uses of the plugin no longer functioning correctly. + To assist in the transition to the new format a compatibility + plugin is also provided, allowing current code to continue + to operate with minimal changes.</p> + <p>Existing users of v2 of the calendar should use the following + header code to work with their existing implementation:</p> +<pre><code class="html"><link rel="stylesheet" type="text/css" href="<b>ui.datepicker.css</b>"/> +<script type="text/javascript" src="<b>ui.datepicker.js</b>"></script> +<script type="text/javascript" src="<b>jquery-calendar-compatibility.js</b>"></script></code></pre> + <p>Download the <a href="compatibility/jquery-calendar-compatibility.js" target="_blank">jquery-calendar-compatibility.js</a> module.</p> + <p>To migrate fully, the following steps need to be taken:</p> + <ul> + <li>Replace references to the <code>jquery-calendar*</code> + files with <code>ui.datepicker*</code>.</li> + <li>Replace references to the <code>popUpCal</code> + object with <code>$.datepicker</code>.</li> + <li>Replace references to the <code>calendar</code> + function with <code>datepicker</code>.</li> + <li>Replace references to the <code>autoPopUp</code> + setting with <code>showOn</code>.</li> + <li>Replace references to the <code>fieldSettings</code> + setting with <code>beforeShow</code>.</li> + <li>Replace references to the <code>customDate</code> + setting with <code>beforeShowDay</code>.</li> + <li>Replace references to inline attributes with the <code>cal:</code> + namespace with <code>date:</code>.</li> + <li>Replace references to the <code>hideCalendar</code> + function with <code>hideDatepicker</code>.</li> + <li>Replace references to the <code>dialogCalendar</code> + function with <code>dialogDatepicker</code>.</li> + <li>Replace references to the <code>$.datepicker.reconfigureFor(selector, ...)</code> + function with <code>$(selector).datepicker('change', ...)</code>.</li> + <li>Replace references to the <code>$.datepicker.enableFor(selector)</code> + function with <code>$(selector).datepicker('enable')</code>.</li> + <li>Replace references to the <code>$.datepicker.disableFor(selector)</code> + function with <code>$(selector).datepicker('disable')</code>.</li> + <li>Replace references to the <code>$.datepicker.showFor(selector)</code> + function with <code>$(selector).datepicker('show')</code>.</li> + <li>Replace references to the <code>$.datepicker.getDateFor(selector)</code> + function with <code>$(selector).datepicker('getDate')</code>.</li> + <li>Replace references to the <code>$.datepicker.setDateFor(selector, ...)</code> + function with <code>$(selector).datepicker('setDate', ...)</code>.</li> + <li>Replace references to the <code>calendar*</code> + CSS styles with <code>datepicker*</code>.</li> + </ul> + <p>For example, this old style code:</p> +<pre><code class="javascript">$('inputs').<b>calendar</b>({<b>autoPopUp</b>: 'both', <b>fieldSettings</b>: setDateRange, + <b>customDate</b>: <b>popUpCal</b>.noWeekends}); + +<input type="text" id="inlineConfig" <b>cal:</b>defaultDate="+7"/></code></pre> + <p>becomes:</p> +<pre><code class="javascript">$('inputs').<b>datepicker</b>({<b>showOn</b>: 'both', <b>beforeShow</b>: setDateRange, + <b>beforeShowDay</b>: <b>$.datepicker</b>.noWeekends}); + +<input type="text" id="inlineConfig" <b>date:</b>defaultDate="+7"/></code></pre> + </div> + <h4>Localization Packages</h4> + <ul style="float:left;width:220px;margin-top:0"> + <li><a href="../../../source/i18n/ui.datepicker-ca.js" target="_blank">Bulgarian</a></li> + <li><a href="../../../source/i18n/ui.datepicker-ca.js" target="_blank">Catalan of Spain</a></li> + <li><a href="../../../source/i18n/ui.datepicker-zh-CN.js" target="_blank">Chinese Simplified</a></li> + <li><a href="../../../source/i18n/ui.datepicker-zh-TW.js" target="_blank">Chinese Traditional</a></li> + <li><a href="../../../source/i18n/ui.datepicker-cs.js" target="_blank">Czech</a></li> + <li><a href="../../../source/i18n/ui.datepicker-da.js" target="_blank">Danish</a></li> + <li><a href="../../../source/i18n/ui.datepicker-nl.js" target="_blank">Dutch</a></li> + <li><a href="../../../source/i18n/ui.datepicker-fi.js" target="_blank">Finnish</a></li> + <li><a href="../../../source/i18n/ui.datepicker-fr.js" target="_blank">French</a></li> + <li><a href="../../../source/i18n/ui.datepicker-de.js" target="_blank">German</a></li> + <li><a href="../../../source/i18n/ui.datepicker-he.js" target="_blank">Hebrew</a></li> + <li><a href="../../../source/i18n/ui.datepicker-hu.js" target="_blank">Hungarian</a></li> + <li><a href="../../../source/i18n/ui.datepicker-is.js" target="_blank">Icelandic</a></li> + <li><a href="../../../source/i18n/ui.datepicker-it.js" target="_blank">Italian</a></li> + </ul> + <ul> + <li><a href="../../../source/i18n/ui.datepicker-ja.js" target="_blank">Japanese</a></li> + <li><a href="../../../source/i18n/ui.datepicker-ko.js" target="_blank">Korean</a></li> + <li><a href="../../../source/i18n/ui.datepicker-lt.js" target="_blank">Lithuanian</a></li> + <li><a href="../../../source/i18n/ui.datepicker-no.js" target="_blank">Norwegian</a></li> + <li><a href="../../../source/i18n/ui.datepicker-pl.js" target="_blank">Polish</a></li> + <li><a href="../../../source/i18n/ui.datepicker-pt-BR.js" target="_blank">Portuguese of Brazil</a></li> + <li><a href="../../../source/i18n/ui.datepicker-ro.js" target="_blank">Romanian</a></li> + <li><a href="../../../source/i18n/ui.datepicker-ru.js" target="_blank">Russian</a></li> + <li><a href="../../../source/i18n/ui.datepicker-sk.js" target="_blank">Slovak</a></li> + <li><a href="../../../source/i18n/ui.datepicker-es.js" target="_blank">Spanish</a></li> + <li><a href="../../../source/i18n/ui.datepicker-sv.js" target="_blank">Swedish</a></li> + <li><a href="../../../source/i18n/ui.datepicker-th.js" target="_blank">Thai</a></li> + <li><a href="../../../source/i18n/ui.datepicker-tr.js" target="_blank">Turkish</a></li> + </ul> + + <!-- Include jQuery --> + <script src="../../../../jquery/jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script> + + <!-- Include UI Datepicker --> + <script src="../../../source/ui.datepicker.js" type="text/javascript" charset="utf-8"></script> + + <!-- Include Demo Files --> + <script type="text/javascript" src="demo/jquery.localisation.js"></script> + <script src="../../../source/i18n/ui.datepicker-fr.js" type="text/javascript" charset="utf-8"></script> + <script src="../../../source/i18n/ui.datepicker-he.js" type="text/javascript" charset="utf-8"></script> + <script type="text/javascript" src="demo/ui.datepicker.demo.js"></script> + </body> +</html>
\ No newline at end of file |
