From 3b5c91fdc668bd02cfb0293cf167f05a5c5b4b86 Mon Sep 17 00:00:00 2001 From: Keith Wood Date: Sun, 21 Jun 2009 07:28:51 +0000 Subject: [PATCH] Datepicker. Fixed #3657 showOtherMonths should allow the selection of days from other months --- demos/datepicker/index.html | 1 + demos/datepicker/other-months.html | 32 +++++++++++++++++++++ tests/unit/datepicker/datepicker_options.js | 21 ++++++++++++++ ui/ui.datepicker.js | 9 ++++-- 4 files changed, 60 insertions(+), 3 deletions(-) create mode 100644 demos/datepicker/other-months.html 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 @@
  • Display inline
  • Display button bar
  • Display month & year menus
    • +
  • Dates in other months
  • Display multiple months
  • Icon trigger
  • Event Search
    • 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 @@ + + + + jQuery UI Datepicker - Dates in other months + + + + + + + + + +
    + +

    Date:

    + +
    + +
    + +

    The datepicker can show dates that come from other than the main month + being displayed. These other dates can also be made selectable.

    + +
    + + + 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 += '' + // actions - (otherMonth ? (showOtherMonths ? printDate.getDate() : ' ') : // display for other months + (otherMonth && !showOtherMonths ? ' ' : // display for other months (unselectable ? '' + printDate.getDate() + '' : '' + printDate.getDate() + '')) + ''; // display for this month + (otherMonth ? ' ui-priority-secondary' : '') + // distinguish dates from other months + '" href="#">' + printDate.getDate() + '')) + ''; // display selectable date printDate.setDate(printDate.getDate() + 1); printDate = this._daylightSavingAdjust(printDate); } -- 2.39.5