<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>
--- /dev/null
+<!doctype html>\r
+<html lang="en">\r
+<head>\r
+ <title>jQuery UI Datepicker - Dates in other months</title>\r
+ <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../../jquery-1.3.2.js"></script>\r
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
+ <script type="text/javascript" src="../../ui/ui.datepicker.js"></script>\r
+ <link type="text/css" href="../demos.css" rel="stylesheet" />\r
+ <script type="text/javascript">\r
+ $(function() {\r
+ $("#datepicker").datepicker({showOtherMonths: true, selectOtherMonths: true});\r
+ });\r
+ </script>\r
+</head>\r
+<body>\r
+\r
+<div class="demo">\r
+\r
+<p>Date: <input type="text" id="datepicker"></p>\r
+\r
+</div><!-- End demo -->\r
+\r
+<div class="demo-description">\r
+\r
+<p>The datepicker can show dates that come from other than the main month\r
+ being displayed. These other dates can also be made selectable.</p>\r
+\r
+</div><!-- End demo-description -->\r
+\r
+</body>\r
+</html>\r
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();
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,
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 = '';
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
((!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);
}
projects / jquery-ui.git / commitdiff