r2824 - Datepicker. Fixed #3657 showOtherMonths should allow the selection of days from other months
Author: kbwood.au
Date: Sun Jun 21 00:28:51 2009
New Revision: 2824
Added:
trunk/demos/datepicker/other-months.html
Modified:
trunk/demos/datepicker/index.html
trunk/tests/unit/datepicker/datepicker_options.js
trunk/ui/ui.datepicker.js
Log:
Datepicker. Fixed #3657 showOtherMonths should allow the selection of days
from other months
Modified: trunk/demos/datepicker/index.html
==============================================================================
--- trunk/demos/datepicker/index.html (original)
+++ trunk/demos/datepicker/index.html Sun Jun 21 00:28:51 2009
@@ -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 & 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>
Added: trunk/demos/datepicker/other-months.html
==============================================================================
--- (empty file)
+++ trunk/demos/datepicker/other-months.html Sun Jun 21 00:28:51 2009
@@ -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">
+
+Date: <input type="text" id="datepicker">
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+The datepicker can show dates that come from other than the main month
+ being displayed. These other dates can also be made selectable.
+
+</div><!-- End demo-description -->
+
+</body>
+</html>
Modified: trunk/tests/unit/datepicker/datepicker_options.js
==============================================================================
--- trunk/tests/unit/datepicker/datepicker_options.js (original)
+++ trunk/tests/unit/datepicker/datepicker_options.js Sun Jun 21 00:28:51
2009
@@ -136,6 +136,27 @@
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();
Modified: trunk/ui/ui.datepicker.js
==============================================================================
--- trunk/ui/ui.datepicker.js (original)
+++ trunk/ui/ui.datepicker.js Sun Jun 21 00:28:51 2009
@@ -76,6 +76,7 @@
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 @@
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 @@
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 @@
((!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() : ' ') :
// display for other months
+ (otherMonth && !showOtherMonths ? ' ' : // 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);
}