Permalink
Browse files

Refactor of Datepicker to use Widget framework

Added templating for layout
  • Loading branch information...
1 parent 467b6f9 commit 827511b6f98171f372791ef2ca60703974a8076c Keith Wood committed Mar 27, 2010
Showing with 4,182 additions and 3,086 deletions.
  1. +61 −0 demos/datepicker/alignment.html
  2. +8 −2 demos/datepicker/alt-field.html
  3. +9 −9 demos/datepicker/animation.html
  4. +6 −3 demos/datepicker/buttonbar.html
  5. +45 −0 demos/datepicker/change-content.html
  6. +40 −0 demos/datepicker/change-select.html
  7. +43 −0 demos/datepicker/change-style.html
  8. +13 −10 demos/datepicker/date-formats.html
  9. +42 −0 demos/datepicker/day-hover.html
  10. +53 −0 demos/datepicker/default-date.html
  11. +14 −2 demos/datepicker/default.html
  12. +18 −4 demos/datepicker/dropdown-month-year.html
  13. +5 −6 demos/datepicker/event-search.html
  14. +39 −0 demos/datepicker/events.html
  15. +39 −0 demos/datepicker/first-day.html
  16. +27 −5 demos/datepicker/icon-trigger.html
  17. +13 −4 demos/datepicker/index.html
  18. +16 −2 demos/datepicker/inline.html
  19. +9 −6 demos/datepicker/localization.html
  20. +33 −2 demos/datepicker/min-max.html
  21. +17 −4 demos/datepicker/multiple-calendars.html
  22. +13 −2 demos/datepicker/other-months.html
  23. +39 −0 demos/datepicker/show-status.html
  24. +8 −2 demos/datepicker/show-week.html
  25. +4 −2 tests/unit/datepicker/datepicker.html
  26. +194 −205 tests/unit/datepicker/datepicker_core.js
  27. +116 −57 tests/unit/datepicker/datepicker_events.js
  28. +105 −47 tests/unit/datepicker/datepicker_methods.js
  29. +442 −454 tests/unit/datepicker/datepicker_options.js
  30. +1 −25 tests/unit/datepicker/datepicker_tickets.js
  31. +92 −2 tests/visual/datepicker/datepicker.html
  32. +39 −25 themes/base/jquery.ui.datepicker.css
  33. +20 −13 ui/i18n/jquery.ui.datepicker-af.js
  34. +20 −13 ui/i18n/jquery.ui.datepicker-ar.js
  35. +20 −13 ui/i18n/jquery.ui.datepicker-az.js
  36. +20 −14 ui/i18n/jquery.ui.datepicker-bg.js
  37. +20 −13 ui/i18n/jquery.ui.datepicker-bs.js
  38. +20 −13 ui/i18n/jquery.ui.datepicker-ca.js
  39. +20 −13 ui/i18n/jquery.ui.datepicker-cs.js
  40. +20 −13 ui/i18n/jquery.ui.datepicker-da.js
  41. +20 −13 ui/i18n/jquery.ui.datepicker-de.js
  42. +20 −13 ui/i18n/jquery.ui.datepicker-el.js
  43. +20 −13 ui/i18n/jquery.ui.datepicker-en-GB.js
  44. +20 −13 ui/i18n/jquery.ui.datepicker-eo.js
  45. +20 −13 ui/i18n/jquery.ui.datepicker-es.js
  46. +20 −13 ui/i18n/jquery.ui.datepicker-et.js
  47. +20 −13 ui/i18n/jquery.ui.datepicker-eu.js
  48. +20 −13 ui/i18n/jquery.ui.datepicker-fa.js
  49. +20 −13 ui/i18n/jquery.ui.datepicker-fi.js
  50. +20 −13 ui/i18n/jquery.ui.datepicker-fo.js
  51. +25 −18 ui/i18n/jquery.ui.datepicker-fr-CH.js
  52. +21 −14 ui/i18n/jquery.ui.datepicker-fr.js
  53. +21 −14 ui/i18n/jquery.ui.datepicker-he.js
  54. +20 −13 ui/i18n/jquery.ui.datepicker-hr.js
  55. +20 −13 ui/i18n/jquery.ui.datepicker-hu.js
  56. +20 −13 ui/i18n/jquery.ui.datepicker-hy.js
  57. +21 −14 ui/i18n/jquery.ui.datepicker-id.js
  58. +21 −14 ui/i18n/jquery.ui.datepicker-is.js
  59. +21 −14 ui/i18n/jquery.ui.datepicker-it.js
  60. +22 −13 ui/i18n/jquery.ui.datepicker-ja.js
  61. +22 −13 ui/i18n/jquery.ui.datepicker-ko.js
  62. +20 −13 ui/i18n/jquery.ui.datepicker-lt.js
  63. +20 −13 ui/i18n/jquery.ui.datepicker-lv.js
  64. +20 −13 ui/i18n/jquery.ui.datepicker-ms.js
  65. +20 −13 ui/i18n/jquery.ui.datepicker-nl.js
  66. +20 −13 ui/i18n/jquery.ui.datepicker-no.js
  67. +20 −13 ui/i18n/jquery.ui.datepicker-pl.js
  68. +20 −13 ui/i18n/jquery.ui.datepicker-pt-BR.js
  69. +22 −18 ui/i18n/jquery.ui.datepicker-ro.js
  70. +20 −13 ui/i18n/jquery.ui.datepicker-ru.js
  71. +20 −13 ui/i18n/jquery.ui.datepicker-sk.js
  72. +21 −14 ui/i18n/jquery.ui.datepicker-sl.js
  73. +20 −13 ui/i18n/jquery.ui.datepicker-sq.js
  74. +20 −13 ui/i18n/jquery.ui.datepicker-sr-SR.js
  75. +20 −13 ui/i18n/jquery.ui.datepicker-sr.js
  76. +21 −14 ui/i18n/jquery.ui.datepicker-sv.js
  77. +20 −13 ui/i18n/jquery.ui.datepicker-ta.js
  78. +20 −13 ui/i18n/jquery.ui.datepicker-th.js
  79. +20 −13 ui/i18n/jquery.ui.datepicker-tr.js
  80. +20 −13 ui/i18n/jquery.ui.datepicker-uk.js
  81. +20 −13 ui/i18n/jquery.ui.datepicker-vi.js
  82. +22 −13 ui/i18n/jquery.ui.datepicker-zh-CN.js
  83. +1 −23 ui/i18n/jquery.ui.datepicker-zh-HK.js
  84. +22 −13 ui/i18n/jquery.ui.datepicker-zh-TW.js
  85. +109 −0 ui/jquery.ui.datepicker.ext.js
  86. +1,427 −1,502 ui/jquery.ui.datepicker.js
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery UI Datepicker - Popup Alignment</title>
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <style type="text/css">
+ #datepicker { margin: 6em 0em 0em 8em; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#datepicker").datepicker();
+ $("#my,#at").change(function() {
+ $("#datepicker").datepicker("option",
+ {myPosition: $("#my").val(), atPosition: $("#at").val()});
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<p>My position: <select id="my"><option value="left top">left top</option>
+ <option value="center top">center top</option>
+ <option value="right top">right top</option>
+ <option value="left center">left center</option>
+ <option value="center center">center center</option>
+ <option value="right center">right center</option>
+ <option value="left bottom">left bottom</option>
+ <option value="center bottom">center bottom</option>
+ <option value="right bottom">right bottom</option></select></p>
+<p>At position: <select id="at"><option value="left top">left top</option>
+ <option value="center top">center top</option>
+ <option value="right top">right top</option>
+ <option value="left center">left center</option>
+ <option value="center center">center center</option>
+ <option value="right center">right center</option>
+ <option value="left bottom" selected>left bottom</option>
+ <option value="center bottom">center bottom</option>
+ <option value="right bottom">right bottom</option></select></p>
+<p>Date: <input type="text" id="datepicker"></p>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>Control the positioning of a popup datepicker via the <code>myPosition</code> and
+ <code>atPosition</code> options, which tie into the Position plugin.
+ The default is "left top" to "left bottom" (or both right if a right-to-left language).</p>
+
+</div><!-- End demo-description -->
+
+</body>
+</html>
@@ -11,7 +11,10 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
- $("#datepicker").datepicker({altField: '#alternate', altFormat: 'DD, d MM, yy'});
+ $("#datepicker").datepicker({
+ altField: "#alternate",
+ altFormat: "DD, d MM, yyyy"
+ });
});
</script>
</head>
@@ -25,7 +28,10 @@
<div class="demo-description">
-<p>Populate an alternate field with its own date format whenever a date is selected using the <code>altField</code> and <code>altFormat</code> options. This feature could be used to present a human-friendly date for user selection, while passing a more computer-friendly date through for further processing.</p>
+<p>Populate an alternate field with its own date format whenever a date is selected using the
+ <code>altField</code> and <code>altFormat</code> options. This feature could be used to
+ present a human-friendly date for user selection, while passing a more computer-friendly
+ date through for further processing.</p>
</div><!-- End demo-description -->
@@ -7,13 +7,13 @@
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.effects.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.effects.blind.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.effects.bounce.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.effects.clip.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.effects.drop.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.effects.fold.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.effects.slide.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.effects.bounce.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.effects.clip.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.effects.drop.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.effects.fold.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.effects.slide.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
@@ -34,12 +34,12 @@
<option value="show">Show (default)</option>
<option value="slideDown">Slide down</option>
<option value="fadeIn">Fade in</option>
- <!-- <option value="blind">Blind (UI Effect)</option>
+ <option value="blind">Blind (UI Effect)</option>
<option value="bounce">Bounce (UI Effect)</option>
<option value="clip">Clip (UI Effect)</option>
<option value="drop">Drop (UI Effect)</option>
<option value="fold">Fold (UI Effect)</option>
- <option value="slide">Slide (UI Effect)</option> -->
+ <option value="slide">Slide (UI Effect)</option>
<option value="">None</option>
</select>
</p>
@@ -8,11 +8,12 @@
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.datepicker.ext.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
- $('#datepicker').datepicker({
- showButtonPanel: true
+ $("#datepicker").datepicker({
+ renderer: $.ui.datepicker.buttonsRenderer
});
});
</script>
@@ -27,7 +28,9 @@
<div class="demo-description">
-<p>Display a button for selecting Today's date and a Done button for closing the calendar with the boolean <code>showButtonPanel</code> option. Each button is enabled by default when the bar is displayed, but can be turned off with additional options. Button text is customizable.</p>
+<p>Display a button for selecting Today's date and a Close button for closing the calendar
+ by changing the <code>renderer</code> option to the <code>buttonsRenderer</code>.
+ Button text is customizable.</p>
</div><!-- End demo-description -->
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery UI Datepicker - Change Day Content</title>
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <style type="text/css">
+ .showDoY sub { font-size: 85%; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#datepicker").datepicker({
+ onDate: showDayOfYear
+ });
+ });
+
+ function showDayOfYear(date) {
+ return {content: date.getDate() + '<br><sub>' + $.ui.datepicker.dayOfYear(date) + '</sub>',
+ dateClass: 'showDoY'};
+ }
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<p>Date: <input type="text" id="datepicker"></p>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>Change the content of an individual date via the <code>onDate</code> callback.
+ Return an object for each date with <code>content</code> set.
+ In this case it includes the day of the year.</p>
+
+</div><!-- End demo-description -->
+
+</body>
+</html>
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery UI Datepicker - Change Day Selectability</title>
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.datepicker.ext.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ $("#datepicker").datepicker({
+ onDate: $.ui.datepicker.noWeekends
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<p>Date: <input type="text" id="datepicker"></p>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>Change the selectability of an individual date via the <code>onDate</code> callback.
+ Return an object for each date with <code>selectable</code> set appropriately.
+ Here the built-in <code>noWeekends</code> function is used to prevent selection
+ of days on weekends - available in the
+ <code>jquery.ui.datepicker.ext.js</code> module.</p>
+
+</div><!-- End demo-description -->
+
+</body>
+</html>
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery UI Datepicker - Change Day Style</title>
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <style type="text/css">
+ .ui-datepicker .even { background: #ccf; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#datepicker").datepicker({
+ onDate: showOddsEvens
+ });
+ });
+
+ function showOddsEvens(date, thisMonth) {
+ return {dateClass: (thisMonth ? (date.getDate() % 2 ? 'even' : 'odd') : '')};
+ }
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<p>Date: <input type="text" id="datepicker"></p>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>Change the style of an individual date via the <code>onDate</code> callback.
+ Return an object for each date with <code>dateClass</code> set and apply the corresponding CSS styling.</p>
+
+</div><!-- End demo-description -->
+
+</body>
+</html>
@@ -12,32 +12,35 @@
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker();
- $("#format").change(function() { $('#datepicker').datepicker('option', {dateFormat: $(this).val()}); });
+ $("#format").change(function() {
+ $("#datepicker").datepicker("option", "dateFormat", $(this).val());
+ });
});
</script>
</head>
<body>
<div class="demo">
-<p>Date: <input type="text" id="datepicker" size="30"/></p>
-
<p>Format options:<br />
<select id="format">
- <option value="mm/dd/yy">Default - mm/dd/yy</option>
- <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
- <option value="d M, y">Short - d M, y</option>
- <option value="d MM, y">Medium - d MM, y</option>
- <option value="DD, d MM, yy">Full - DD, d MM, yy</option>
- <option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
+ <option value="mm/dd/yyyy">Default - mm/dd/yyyy</option>
+ <option value="yyyy-mm-dd">ISO 8601 - yyyy-mm-dd</option>
+ <option value="d M, yy">Short - d M, yy</option>
+ <option value="d MM, yy">Medium - d MM, yy</option>
+ <option value="DD, d MM, yyyy">Full - DD, d MM, yyyy</option>
+ <option value="'day' d 'of' MM 'in the year' yyyy">With text - 'day' d 'of' MM 'in the year' yyyy</option>
</select>
</p>
+<p>Date: <input type="text" id="datepicker" size="30"/></p>
+
</div><!-- End demo -->
<div class="demo-description">
-<p>Display date feedback in a variety of ways. Choose a date format from the dropdown, then click on the input and select a date to see it in that format.</p>
+<p>Display date feedback in a variety of ways. Choose a date format from the dropdown,
+ then click on the input and select a date to see it in that format.</p>
</div><!-- End demo-description -->
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery UI Datepicker - Hover Over Day</title>
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.datepicker.ext.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ $("#datepicker").datepicker({
+ onShow: $.ui.datepicker.hoverCallback(function(date, selectable) {
+ $("#hoverDate").text(!selectable ? "nothing" :
+ $.ui.datepicker.formatDate("D d M yyyy", date));
+ })
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<p>Date: <input type="text" id="datepicker">
+ You're looking at <span id="hoverDate">nothing</span>.</p>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>Extend the datepicker to send callbacks when hovering over a date by wrapping your function
+ in the built-in <code>hoverCallback</code> and assigning it to the <code>onShow</code> option -
+ available in the <code>jquery.ui.datepicker.ext.js</code> module.</p>
+
+</div><!-- End demo-description -->
+
+</body>
+</html>
Oops, something went wrong.

0 comments on commit 827511b

Please sign in to comment.