aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorKeith Wood <kbwood.au@gmail.com>2009-06-21 07:28:51 +0000
committerKeith Wood <kbwood.au@gmail.com>2009-06-21 07:28:51 +0000
commit3b5c91fdc668bd02cfb0293cf167f05a5c5b4b86 (patch)
tree1c0730894087b648203750643e0f2cf01e6cdbaa
parent82df8dbf533f2b44602e33c4201d7fe8475be919 (diff)
downloadjquery-ui-3b5c91fdc668bd02cfb0293cf167f05a5c5b4b86.tar.gz
jquery-ui-3b5c91fdc668bd02cfb0293cf167f05a5c5b4b86.zip
Datepicker. Fixed #3657 showOtherMonths should allow the selection of days from other months
Diffstat
-rw-r--r--demos/datepicker/index.html1
-rw-r--r--demos/datepicker/other-months.html32
-rw-r--r--tests/unit/datepicker/datepicker_options.js21
-rw-r--r--ui/ui.datepicker.js9
4 files changed, 60 insertions, 3 deletions
diff --git a/demos/datepicker/index.html b/demos/datepicker/index.html
index c71922f2b..9cce296e7 100644
--- a/demos/datepicker/index.html
+++ b/demos/datepicker/index.html
@@ -17,6 +17,7 @@
<li><a href="inline.html">Display inline</a></li>
<li><a href="buttonbar.html">Display button bar</a></li>
<li><a href="dropdown-month-year.html">Display month &amp; year menus</a></li>
+ <li><a href="other-months.html">Dates in other months</a></li>
<li><a href="multiple-calendars.html">Display multiple months</a></li>
<li><a href="icon-trigger.html">Icon trigger</a></li>
<li><a href="event-search.html">Event Search</a></li>
diff --git a/demos/datepicker/other-months.html b/demos/datepicker/other-months.html
new file mode 100644
index 000000000..f555f3f98
--- /dev/null
+++ b/demos/datepicker/other-months.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Datepicker - Dates in other months</title>
+ <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ $("#datepicker").datepicker({showOtherMonths: true, selectOtherMonths: true});
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<p>Date: <input type="text" id="datepicker"></p>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>The datepicker can show dates that come from other than the main month
+ being displayed. These other dates can also be made selectable.</p>
+
+</div><!-- End demo-description -->
+
+</body>
+</html>
diff --git a/tests/unit/datepicker/datepicker_options.js b/tests/unit/datepicker/datepicker_options.js
index 8bde84473..0a111a93c 100644
--- a/tests/unit/datepicker/datepicker_options.js
+++ b/tests/unit/datepicker/datepicker_options.js
@@ -136,6 +136,27 @@ test('invocation', function() {
inp.datepicker('hide').datepicker('destroy');
});
+test('otherMonths', function() {
+ var inp = init('#inp');
+ var pop = $('#ui-datepicker-div');
+ inp.val('06/01/2009').datepicker('show');
+ equals(pop.find('tbody').text(), '\u00a0123456789101112131415161718192021222324252627282930\u00a0\u00a0\u00a0\u00a0',
+ 'Other months - none');
+ ok(pop.find('td:last *').length == 0, 'Other months - no content');
+ inp.datepicker('hide').datepicker('option', 'showOtherMonths', true).datepicker('show');
+ equals(pop.find('tbody').text(), '311234567891011121314151617181920212223242526272829301234',
+ 'Other months - show');
+ ok(pop.find('td:last span').length == 1, 'Other months - span content');
+ inp.datepicker('hide').datepicker('option', 'selectOtherMonths', true).datepicker('show');
+ equals(pop.find('tbody').text(), '311234567891011121314151617181920212223242526272829301234',
+ 'Other months - select');
+ ok(pop.find('td:last a').length == 1, 'Other months - link content');
+ inp.datepicker('hide').datepicker('option', 'showOtherMonths', false).datepicker('show');
+ equals(pop.find('tbody').text(), '\u00a0123456789101112131415161718192021222324252627282930\u00a0\u00a0\u00a0\u00a0',
+ 'Other months - none');
+ ok(pop.find('td:last *').length == 0, 'Other months - no content');
+});
+
test('defaultDate', function() {
var inp = init('#inp');
var date = new Date();
diff --git a/ui/ui.datepicker.js b/ui/ui.datepicker.js
index 478b756e3..f3f00acb3 100644
--- a/ui/ui.datepicker.js
+++ b/ui/ui.datepicker.js
@@ -76,6 +76,7 @@ function Datepicker() {
yearRange: '-10:+10', // Range of years to display in drop-down,
// either relative to current year (-nn:+nn) or absolute (nnnn:nnnn)
showOtherMonths: false, // True to show dates in other months, false to leave blank
+ selectOtherMonths: false, // True to allow selection of dates in other months, false for unselectable
calculateWeek: this.iso8601Week, // How to calculate the week of the year,
// takes a Date and returns the number of the week for it
shortYearCutoff: '+10', // Short year values < this are in the current century,
@@ -1340,6 +1341,7 @@ $.extend(Datepicker.prototype, {
var monthNamesShort = this._get(inst, 'monthNamesShort');
var beforeShowDay = this._get(inst, 'beforeShowDay');
var showOtherMonths = this._get(inst, 'showOtherMonths');
+ var selectOtherMonths = this._get(inst, 'selectOtherMonths');
var calculateWeek = this._get(inst, 'calculateWeek') || this.iso8601Week;
var defaultDate = this._getDefaultDate(inst);
var html = '';
@@ -1385,7 +1387,7 @@ $.extend(Datepicker.prototype, {
var daySettings = (beforeShowDay ?
beforeShowDay.apply((inst.input ? inst.input[0] : null), [printDate]) : [true, '']);
var otherMonth = (printDate.getMonth() != drawMonth);
- var unselectable = otherMonth || !daySettings[0] ||
+ var unselectable = (otherMonth && !selectOtherMonths) || !daySettings[0] ||
(minDate && printDate < minDate) || (maxDate && printDate > maxDate);
tbody += '<td class="' +
((dow + firstDay + 6) % 7 >= 5 ? ' ui-datepicker-week-end' : '') + // highlight weekends
@@ -1401,11 +1403,12 @@ $.extend(Datepicker.prototype, {
((!otherMonth || showOtherMonths) && daySettings[2] ? ' title="' + daySettings[2] + '"' : '') + // cell title
(unselectable ? '' : ' onclick="DP_jQuery.datepicker._selectDay(\'#' +
inst.id + '\',' + drawMonth + ',' + drawYear + ', this);return false;"') + '>' + // actions
- (otherMonth ? (showOtherMonths ? printDate.getDate() : '&#xa0;') : // display for other months
+ (otherMonth && !showOtherMonths ? '&#xa0;' : // display for other months
(unselectable ? '<span class="ui-state-default">' + printDate.getDate() + '</span>' : '<a class="ui-state-default' +
(printDate.getTime() == today.getTime() ? ' ui-state-highlight' : '') +
(printDate.getTime() == currentDate.getTime() ? ' ui-state-active' : '') + // highlight selected day
- '" href="#">' + printDate.getDate() + '</a>')) + '</td>'; // display for this month
+ (otherMonth ? ' ui-priority-secondary' : '') + // distinguish dates from other months
+ '" href="#">' + printDate.getDate() + '</a>')) + '</td>'; // display selectable date
printDate.setDate(printDate.getDate() + 1);
printDate = this._daylightSavingAdjust(printDate);
}
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-21 02:56:11 +0000