From 3524ef0c26f8760615c01217045c72f9bb20dde9 Mon Sep 17 00:00:00 2001 From: Richard Worth Date: Sat, 7 Jun 2008 17:35:27 +0000 Subject: removed extra level ui folder --- ui/demos/functional/datepicker/debug.html | 21 - .../functional/datepicker/demo/img/active-bg.gif | Bin 89 -> 0 bytes ui/demos/functional/datepicker/demo/img/ar.gif | Bin 863 -> 0 bytes ui/demos/functional/datepicker/demo/img/au.gif | Bin 941 -> 0 bytes ui/demos/functional/datepicker/demo/img/br.gif | Bin 925 -> 0 bytes .../functional/datepicker/demo/img/calendar.gif | Bin 269 -> 0 bytes .../functional/datepicker/demo/img/calendar2.gif | Bin 1035 -> 0 bytes ui/demos/functional/datepicker/demo/img/cn.gif | Bin 856 -> 0 bytes .../functional/datepicker/demo/img/dark-bg.gif | Bin 85 -> 0 bytes .../functional/datepicker/demo/img/hover-bg.gif | Bin 89 -> 0 bytes ui/demos/functional/datepicker/demo/img/id.gif | Bin 840 -> 0 bytes ui/demos/functional/datepicker/demo/img/ie.gif | Bin 875 -> 0 bytes ui/demos/functional/datepicker/demo/img/ke.gif | Bin 948 -> 0 bytes ui/demos/functional/datepicker/demo/img/lb.gif | Bin 903 -> 0 bytes ui/demos/functional/datepicker/demo/img/next.gif | Bin 98 -> 0 bytes .../functional/datepicker/demo/img/normal-bg.gif | Bin 110 -> 0 bytes ui/demos/functional/datepicker/demo/img/nz.gif | Bin 925 -> 0 bytes ui/demos/functional/datepicker/demo/img/prev.gif | Bin 97 -> 0 bytes ui/demos/functional/datepicker/demo/img/se.gif | Bin 892 -> 0 bytes ui/demos/functional/datepicker/demo/img/tab.png | Bin 1717 -> 0 bytes ui/demos/functional/datepicker/demo/img/us.gif | Bin 896 -> 0 bytes ui/demos/functional/datepicker/demo/img/za.gif | Bin 900 -> 0 bytes .../datepicker/demo/jquery.localisation.js | 64 -- .../datepicker/demo/ui.datepicker.alt.css | 158 ---- .../datepicker/demo/ui.datepicker.demo.css | 53 -- .../datepicker/demo/ui.datepicker.demo.js | 81 -- ui/demos/functional/datepicker/index.html | 887 --------------------- 27 files changed, 1264 deletions(-) delete mode 100644 ui/demos/functional/datepicker/debug.html delete mode 100644 ui/demos/functional/datepicker/demo/img/active-bg.gif delete mode 100644 ui/demos/functional/datepicker/demo/img/ar.gif delete mode 100644 ui/demos/functional/datepicker/demo/img/au.gif delete mode 100644 ui/demos/functional/datepicker/demo/img/br.gif delete mode 100644 ui/demos/functional/datepicker/demo/img/calendar.gif delete mode 100644 ui/demos/functional/datepicker/demo/img/calendar2.gif delete mode 100644 ui/demos/functional/datepicker/demo/img/cn.gif delete mode 100644 ui/demos/functional/datepicker/demo/img/dark-bg.gif delete mode 100644 ui/demos/functional/datepicker/demo/img/hover-bg.gif delete mode 100644 ui/demos/functional/datepicker/demo/img/id.gif delete mode 100644 ui/demos/functional/datepicker/demo/img/ie.gif delete mode 100644 ui/demos/functional/datepicker/demo/img/ke.gif delete mode 100644 ui/demos/functional/datepicker/demo/img/lb.gif delete mode 100644 ui/demos/functional/datepicker/demo/img/next.gif delete mode 100644 ui/demos/functional/datepicker/demo/img/normal-bg.gif delete mode 100644 ui/demos/functional/datepicker/demo/img/nz.gif delete mode 100644 ui/demos/functional/datepicker/demo/img/prev.gif delete mode 100644 ui/demos/functional/datepicker/demo/img/se.gif delete mode 100644 ui/demos/functional/datepicker/demo/img/tab.png delete mode 100644 ui/demos/functional/datepicker/demo/img/us.gif delete mode 100644 ui/demos/functional/datepicker/demo/img/za.gif delete mode 100644 ui/demos/functional/datepicker/demo/jquery.localisation.js delete mode 100644 ui/demos/functional/datepicker/demo/ui.datepicker.alt.css delete mode 100644 ui/demos/functional/datepicker/demo/ui.datepicker.demo.css delete mode 100644 ui/demos/functional/datepicker/demo/ui.datepicker.demo.js delete mode 100644 ui/demos/functional/datepicker/index.html (limited to 'ui/demos/functional') diff --git a/ui/demos/functional/datepicker/debug.html b/ui/demos/functional/datepicker/debug.html deleted file mode 100644 index 91dab145b..000000000 --- a/ui/demos/functional/datepicker/debug.html +++ /dev/null @@ -1,21 +0,0 @@ - - - Only core files for easy debug - - - - - - - - - - - - - - \ No newline at end of file diff --git a/ui/demos/functional/datepicker/demo/img/active-bg.gif b/ui/demos/functional/datepicker/demo/img/active-bg.gif deleted file mode 100644 index d608c5469..000000000 Binary files a/ui/demos/functional/datepicker/demo/img/active-bg.gif and /dev/null differ diff --git a/ui/demos/functional/datepicker/demo/img/ar.gif b/ui/demos/functional/datepicker/demo/img/ar.gif deleted file mode 100644 index f34c90f5c..000000000 Binary files a/ui/demos/functional/datepicker/demo/img/ar.gif and /dev/null differ diff --git a/ui/demos/functional/datepicker/demo/img/au.gif b/ui/demos/functional/datepicker/demo/img/au.gif deleted file mode 100644 index db005b4c7..000000000 Binary files a/ui/demos/functional/datepicker/demo/img/au.gif and /dev/null differ diff --git a/ui/demos/functional/datepicker/demo/img/br.gif b/ui/demos/functional/datepicker/demo/img/br.gif deleted file mode 100644 index 8b8bf147d..000000000 Binary files a/ui/demos/functional/datepicker/demo/img/br.gif and /dev/null differ diff --git a/ui/demos/functional/datepicker/demo/img/calendar.gif b/ui/demos/functional/datepicker/demo/img/calendar.gif deleted file mode 100644 index d0abaa7c0..000000000 Binary files a/ui/demos/functional/datepicker/demo/img/calendar.gif and /dev/null differ diff --git a/ui/demos/functional/datepicker/demo/img/calendar2.gif b/ui/demos/functional/datepicker/demo/img/calendar2.gif deleted file mode 100644 index 519a1fd4a..000000000 Binary files a/ui/demos/functional/datepicker/demo/img/calendar2.gif and /dev/null differ diff --git a/ui/demos/functional/datepicker/demo/img/cn.gif b/ui/demos/functional/datepicker/demo/img/cn.gif deleted file mode 100644 index 5482753d6..000000000 Binary files a/ui/demos/functional/datepicker/demo/img/cn.gif and /dev/null differ diff --git a/ui/demos/functional/datepicker/demo/img/dark-bg.gif b/ui/demos/functional/datepicker/demo/img/dark-bg.gif deleted file mode 100644 index 1dea48a8f..000000000 Binary files a/ui/demos/functional/datepicker/demo/img/dark-bg.gif and /dev/null differ diff --git a/ui/demos/functional/datepicker/demo/img/hover-bg.gif b/ui/demos/functional/datepicker/demo/img/hover-bg.gif deleted file mode 100644 index fbf94fc2c..000000000 Binary files a/ui/demos/functional/datepicker/demo/img/hover-bg.gif and /dev/null differ diff --git a/ui/demos/functional/datepicker/demo/img/id.gif b/ui/demos/functional/datepicker/demo/img/id.gif deleted file mode 100644 index d7f4ab8a3..000000000 Binary files a/ui/demos/functional/datepicker/demo/img/id.gif and /dev/null differ diff --git a/ui/demos/functional/datepicker/demo/img/ie.gif b/ui/demos/functional/datepicker/demo/img/ie.gif deleted file mode 100644 index 827c498d2..000000000 Binary files a/ui/demos/functional/datepicker/demo/img/ie.gif and /dev/null differ diff --git a/ui/demos/functional/datepicker/demo/img/ke.gif b/ui/demos/functional/datepicker/demo/img/ke.gif deleted file mode 100644 index e352177c7..000000000 Binary files a/ui/demos/functional/datepicker/demo/img/ke.gif and /dev/null differ diff --git a/ui/demos/functional/datepicker/demo/img/lb.gif b/ui/demos/functional/datepicker/demo/img/lb.gif deleted file mode 100644 index f204918fe..000000000 Binary files a/ui/demos/functional/datepicker/demo/img/lb.gif and /dev/null differ diff --git a/ui/demos/functional/datepicker/demo/img/next.gif b/ui/demos/functional/datepicker/demo/img/next.gif deleted file mode 100644 index be0959b1b..000000000 Binary files a/ui/demos/functional/datepicker/demo/img/next.gif and /dev/null differ diff --git a/ui/demos/functional/datepicker/demo/img/normal-bg.gif b/ui/demos/functional/datepicker/demo/img/normal-bg.gif deleted file mode 100644 index bdb506869..000000000 Binary files a/ui/demos/functional/datepicker/demo/img/normal-bg.gif and /dev/null differ diff --git a/ui/demos/functional/datepicker/demo/img/nz.gif b/ui/demos/functional/datepicker/demo/img/nz.gif deleted file mode 100644 index 86b89cb27..000000000 Binary files a/ui/demos/functional/datepicker/demo/img/nz.gif and /dev/null differ diff --git a/ui/demos/functional/datepicker/demo/img/prev.gif b/ui/demos/functional/datepicker/demo/img/prev.gif deleted file mode 100644 index 95d840f47..000000000 Binary files a/ui/demos/functional/datepicker/demo/img/prev.gif and /dev/null differ diff --git a/ui/demos/functional/datepicker/demo/img/se.gif b/ui/demos/functional/datepicker/demo/img/se.gif deleted file mode 100644 index 7301c598e..000000000 Binary files a/ui/demos/functional/datepicker/demo/img/se.gif and /dev/null differ diff --git a/ui/demos/functional/datepicker/demo/img/tab.png b/ui/demos/functional/datepicker/demo/img/tab.png deleted file mode 100644 index 01c8ab417..000000000 Binary files a/ui/demos/functional/datepicker/demo/img/tab.png and /dev/null differ diff --git a/ui/demos/functional/datepicker/demo/img/us.gif b/ui/demos/functional/datepicker/demo/img/us.gif deleted file mode 100644 index 39c472e26..000000000 Binary files a/ui/demos/functional/datepicker/demo/img/us.gif and /dev/null differ diff --git a/ui/demos/functional/datepicker/demo/img/za.gif b/ui/demos/functional/datepicker/demo/img/za.gif deleted file mode 100644 index 197cbd888..000000000 Binary files a/ui/demos/functional/datepicker/demo/img/za.gif and /dev/null differ diff --git a/ui/demos/functional/datepicker/demo/jquery.localisation.js b/ui/demos/functional/datepicker/demo/jquery.localisation.js deleted file mode 100644 index b11e37835..000000000 --- a/ui/demos/functional/datepicker/demo/jquery.localisation.js +++ /dev/null @@ -1,64 +0,0 @@ -/* 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 -.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/ui/demos/functional/datepicker/demo/ui.datepicker.alt.css b/ui/demos/functional/datepicker/demo/ui.datepicker.alt.css deleted file mode 100644 index d07a6e7bf..000000000 --- a/ui/demos/functional/datepicker/demo/ui.datepicker.alt.css +++ /dev/null @@ -1,158 +0,0 @@ -/* 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/ui/demos/functional/datepicker/demo/ui.datepicker.demo.css b/ui/demos/functional/datepicker/demo/ui.datepicker.demo.css deleted file mode 100644 index 2920d857f..000000000 --- a/ui/demos/functional/datepicker/demo/ui.datepicker.demo.css +++ /dev/null @@ -1,53 +0,0 @@ -#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/ui/demos/functional/datepicker/demo/ui.datepicker.demo.js b/ui/demos/functional/datepicker/demo/ui.datepicker.demo.js deleted file mode 100644 index 3d7d9b640..000000000 --- a/ui/demos/functional/datepicker/demo/ui.datepicker.demo.js +++ /dev/null @@ -1,81 +0,0 @@ -// 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( '
' +
-			$(this).html().replace(/
" ); - 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: ' Prev', - nextText: 'Next '}); - $('#button3').click(function() { - $(this).datepicker('dialog', $('#altDialog').val(), - setAltDateFromDialog, {prompt: 'Choose a date', speed: '', - prevText: ' Prev', - nextText: 'Next '}); - }); -}); - -// 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/ui/demos/functional/datepicker/index.html b/ui/demos/functional/datepicker/index.html deleted file mode 100644 index 4b28d7e3a..000000000 --- a/ui/demos/functional/datepicker/index.html +++ /dev/null @@ -1,887 +0,0 @@ - - - - - jQuery UI Datepicker - - - - - - - - - - -
-
- -
-
-

Defaults

-

A date picker can easily be added to an input field with default settings.

-

Default date picker: -

- -

IE select issue: -

-

The defaults are:

-
    -
  • Date picker appears on focus
    • -
  • Text is in English
    • -
  • Date format is mm/dd/yyyy
    • -
  • Clear/Close controls show at the top
    • -
  • Month and year are selectable directly
    • -
  • 10 years before and after the selected year are shown
    • -
  • Show a single month
    • -
  • Select a single date
    • -
  • Week starts on Sunday
    • -
  • Day names are clickable to change the first day of the week
    • -
  • Days in other months are not displayed
    • -
  • No date restrictions
    • -
  • Clicking elsewhere closes the date picker
    • -
-

Processed fields are marked with a class of hasDatepicker - and are not re-processed if targetted a second time.

-

You can override the default settings that apply to all date picker instances.

- -
-
-

Invocation

-

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.

-

Datepicker appears on focus: - -

- -

Appears via text button: - -

- -

Appears both ways: - -

- -

You can embed the trigger image within the input area via CSS.

-

Embedded button: -

- -

Enable and disable datepicker with 'enable' and 'disable' commands.

- -

The date picker can also be triggered externally for a particular input.

-

External trigger: -

- -

Or even opened as a "dialog". If the blockUI plugin is available, - it is used to create a modal dialog.

-

Date picker dialog: - -

- -
-
-

Keystrokes

-

The date picker also responds to keystrokes entered in the input field.

-

Keyboard driven: -

-

The relevant keystrokes are:

-
    -
  • page up/downprevious/next month
    • -
  • ctrl+page up/downprevious/next year
    • -
  • ctrl+homecurrent month or open when closed
    • -
  • ctrl+left/rightprevious/next day
    • -
  • ctrl+up/downprevious/next week
    • -
  • enteraccept the selected date
    • -
  • ctrl+endclose and erase the date
    • -
  • escapeclose the date picker without selection
    • -
-
-
-

Restricting

-

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.

-

Restricted functionality: -

- -

You can also limit the range of dates selectable within the date picker. - Here it's between 26-Jan-05 and 26-Jan-07.

-

Limited dates: -

- -

Or set a range relative to today by specifying a number - rather than an exact date, in this case in the coming year.

-

Limited dates (relative): -

- -

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.

-

Limited dates (extended): -

- -

Note that the range of selectable months and years changes appropriately. Also, - note that the Today link is no longer available as today is not in the range. - By default, the Prev and Next links are disabled if they are not - applicable. You can override this to remove them instead, with the - hideIfNoPrevNext setting.

-
-
-

Date Formats

-

You can set a variety of date formats for the date picker, - with the default being 'mm/dd/yy'.

-

Medium format: -

- -

Long format: -

- -

Full format: -

- -

Display dates without the century. The century is then determined based on the - shortYearCutoff 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.

-

No century: -

- -

ISO date format: -

- -

French full format: -

- -

The formatting codes are:

-
    -
  • dday of month (no leading zero)
    • -
  • ddday of month (two digit)
    • -
  • Dday name short
    • -
  • DDday name long
    • -
  • mmonth of year (no leading zero)
    • -
  • mmmonth of year (two digit)
    • -
  • Mmonth name short
    • -
  • MMmonth name long
    • -
  • yyear (two digit)
    • -
  • yyyear (four digit)
    • -
  • '...'literal text
    • -
  • ''single quote
    • -
-
-
-

Customize

-

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.

-

No weekends: -

- -

Or you can provide your own function. The one below highlights and - prevents selection of a set of national days.

-

National days: -

- -

With CSS like the following:

-
.au_day { color: blue !important; background: #eee url(au.gif) no-repeat center !important; }
-
-
-

Localisation

-

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.

-

- : -

-

The presentation is slightly different for right-to-left languages.

-

- : -

-

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.

-
<script type="text/javascript" src="ui.datepicker-fr.js"></script>
-

Thereafter, if desired, you can restore the original language settings.

-
$.datepicker.setDefaults($.datepicker.regional['']);
-

And then configure the language per date picker instance.

- -

Localisation packages:

-

Localisation packages can be found below under Settings and Documentation.

-
-
-

Date Range

-

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).

-

Date range: - to -

- -

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 Previous and Next moving three months at a time.

-

Date range: -

- - -

Two months with range select: -

- -

Six months with range select: -

- -
-
-

Miscellaneous 1

-

Set the date shown when first opening the date picker. The default is today.

-

Open at 01-Jan-2007: -

- -

Open at 7 days from today: -

- -

Or specify a period from today - 'd' for days, - 'w' for weeks, 'm' for months, or 'y' for years. -

Open at 2 weeks from today: -

- -

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 calculateWeek to a function that - takes a date as a parameter and returns the number of the week.

-

Show week of the year: -

- -

Additional settings let you move the Clear/Close controls - to the bottom, hide the Clear 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 onSelect callback is specified, the - onchange event of the input field is triggered.

-

Additional settings: -

- -
-
-

Miscellaneous 2

-

Hide the datepicker on demand (press alt-h here) or - remove the datepicker altogether if you've finished with it.

-

Remove popup datepicker: -   -

-

Remove inline datepicker: -

- -

(Advanced Technique)
Connect the date picker to linked drop-downs. You still need an input field, - but it is hidden following the drop-downs.

-

Linked drop-downs: - - - -

- -
-
-

Changing Settings

-

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.

-

Display animation and speed: - - -

-

Change datepicker: -

-

When the option in the select changes, the following function is called:

- -

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.

-

Inline configuration 1: - - blank

-

Inline configuration 2: -

- -
-
-

Inline

-

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.

- -
- -

Show a number of months at once and set the range directly.

-

Inline range with two months:

-
- -
-

- Selected range is:   - -

- -

(Advanced Technique)
- Set initial value of inline date range to one week before and after today's date. - Set the text field to current selected date.

-

- -

- -
-
-

Stylesheets

-

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.

-

Alternate style: -

-

In a dialog: - -

-

The basic HTML structure of the date picker is shown below:

-
<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>
-
-
-

Compatibility

-

v3.3 to v3.4

-

The jQuery UI interfaces changed again, so here's another compatibility module.

-

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

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

Download the ui.datepicker.compatibility-3.3.js module.

-

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

-
    -
  • Replace references to the $(selector).attachDatepicker(...) - function with $(selector).datepicker(...).
    • -
  • Replace references to the $(selector).removeDatepicker() - function with $(selector).datepicker('destroy').
    • -
  • Replace references to the $(selector).datepicker.changDatepicker(...) - function with $(selector).datepicker('change', ...).
    • -
  • Replace references to the $(selector).datepicker.enableDatepicker() - function with $(selector).datepicker('enable').
    • -
  • Replace references to the $(selector).disableDatepicker() - function with $(selector).datepicker('disable').
    • -
  • Replace references to the $(selector).isDisabledDatepicker() - function with $(selector).datepicker('isDisabled').
    • -
  • Replace references to the $(selector).showDatepicker() - function with $(selector).datepicker('show').
    • -
  • Replace references to the $.datepicker.hideDatepicker() - function with $(selector).datepicker('hide').
    • -
  • Replace references to the $(selector).getDatepickerDate() - function with $(selector).datepicker('getDate').
    • -
  • Replace references to the $(selector).setDatepickerDate(...) - function with $(selector).datepicker('setDate', ...).
    • -
-

For example, this old style code:

-
$('inputs').attachDatepicker(...);
-$('inputs').changeDatepicker(...);
-

becomes:

-
$('inputs').datepicker(...);
-$('inputs').datepicker('change', ...);
- -

v3.2 to v3.4

-

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

-

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

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

Download the ui.datepicker.compatibility-3.2.js module.

-

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

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

For example, this old style code:

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

becomes:

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

v2.x to v3.3

-

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

-

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

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

Download the jquery-calendar-compatibility.js module.

-

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

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

For example, this old style code:

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

becomes:

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

Localization Packages

- - - - - - - - - - - - - - - - \ No newline at end of file -- cgit v1.2.3