Permalink
Browse files

Adding beforeShowDay function. Very similar to jquery datepicker befo…

  • Loading branch information...
1 parent 50a1396 commit 06c6809e06b096d6c3cfe812a4430e15f104406e @gabriel committed Jan 8, 2013
Showing with 63 additions and 0 deletions.
  1. +6 −0 README.md
  2. +14 −0 js/bootstrap-datepicker.js
  3. +43 −0 tests/suites/options.js
View
6 README.md
@@ -206,6 +206,12 @@ Boolean. Default: true
Whether or not to force parsing of the input value when the picker is closed. That is, when an invalid date is left in the input field by the user, the picker will forcibly parse that value, and set the input's value to the new, valid date, conforming to the given `format`.
+### beforeShowDay
+
+Function. Default: null
+
+A function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name or null for the default presentation.
+
## Markup
Format a component.
View
14 js/bootstrap-datepicker.js
@@ -113,6 +113,7 @@
this.startDate = -Infinity;
this.endDate = Infinity;
this.daysOfWeekDisabled = [];
+ this.beforeShowDay = options.beforeShowDay;
this.setStartDate(options.startDate||this.element.data('date-startdate'));
this.setEndDate(options.endDate||this.element.data('date-enddate'));
this.setDaysOfWeekDisabled(options.daysOfWeekDisabled||this.element.data('date-days-of-week-disabled'));
@@ -405,6 +406,19 @@
$.inArray(prevMonth.getUTCDay(), this.daysOfWeekDisabled) !== -1) {
clsName += ' disabled';
}
+
+ if (!!this.beforeShowDay) {
+ var beforeShowDay = this.beforeShowDay(prevMonth);
+ if (!!beforeShowDay) {
+ if (!beforeShowDay[0]) {
+ clsName += ' disabled';
+ }
+ if (!!beforeShowDay[1] && beforeShowDay[1] != '') {
+ clsName += ' ' + beforeShowDay[1];
+ }
+ }
+ }
+
html.push('<td class="day'+clsName+'">'+prevMonth.getUTCDate() + '</td>');
if (prevMonth.getUTCDay() == this.weekEnd) {
html.push('</tr>');
View
43 tests/suites/options.js
@@ -283,3 +283,46 @@ test('DaysOfWeekDisabled', function(){
target = picker.find('.datepicker-days tbody td:nth(26)');
ok(target.hasClass('disabled'), 'Day of week is disabled');
});
+
+test('BeforeShowDay', function(){
+
+ var beforeShowDay = function(date) {
+ var dateTime = UTCDate(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()).getTime();
+ var dateTime26th = UTCDate(2012, 9, 26).getTime();
+ var dateTime27th = UTCDate(2012, 9, 27).getTime();
+ var dateTime28th = UTCDate(2012, 9, 28).getTime();
+
+ if (dateTime == dateTime26th) {
+ return [true, 'test26'];
+ } else if (dateTime == dateTime27th) {
+ return [false, 'test27'];
+ } else if (dateTime == dateTime28th) {
+ return [false, null];
+ }
+ return [true, null];
+ };
+
+ var input = $('<input />')
+ .appendTo('#qunit-fixture')
+ .val('2012-10-26')
+ .datepicker({
+ format: 'yyyy-mm-dd',
+ beforeShowDay: beforeShowDay
+ }),
+ dp = input.data('datepicker'),
+ picker = dp.picker,
+ target;
+
+
+ input.focus();
+ target = picker.find('.datepicker-days tbody td:nth(26)');
+ ok(target.hasClass('test26'), '26th has test26 class');
+ ok(!target.hasClass('disabled'), '26th is enabled');
+ target = picker.find('.datepicker-days tbody td:nth(27)');
+ ok(target.hasClass('test27'), '27th has test27 class');
+ ok(target.hasClass('disabled'), '27th is disabled');
+ target = picker.find('.datepicker-days tbody td:nth(28)');
+ ok(target.hasClass('disabled'), '28th is disabled');
+ target = picker.find('.datepicker-days tbody td:nth(29)');
+ ok(!target.hasClass('disabled'), '29th is enabled');
+});

0 comments on commit 06c6809

Please sign in to comment.