From e1dfbbd32d524609df5d2c12bf4f76dedbd351a2 Mon Sep 17 00:00:00 2001 From: Chris Hynes Date: Sun, 23 Oct 2016 19:03:58 -0700 Subject: [PATCH 1/4] Allow customizing day cell value --- docs/options.rst | 1 + js/bootstrap-datepicker.js | 10 +++++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/docs/options.rst b/docs/options.rst index c8380a2f0..68aee828b 100644 --- a/docs/options.rst +++ b/docs/options.rst @@ -31,6 +31,7 @@ A function that takes a date as a parameter and returns one of the following val * ``enabled``: same as the Boolean value above * ``classes``: same as the String value above * ``tooltip``: a tooltip to apply to this date, via the ``title`` HTML attribute + * ``displayDate``: the value to display in the day cell, rather than the just the day of month beforeShowMonth diff --git a/js/bootstrap-datepicker.js b/js/bootstrap-datepicker.js index 37741bde9..73fbbdba2 100644 --- a/js/bootstrap-datepicker.js +++ b/js/bootstrap-datepicker.js @@ -1017,6 +1017,8 @@ clsName = this.getClassNames(prevMonth); clsName.push('day'); + var displayDate = prevMonth.getUTCDate(); + if (this.o.beforeShowDay !== $.noop){ before = this.o.beforeShowDay(this._utc_to_local(prevMonth)); if (before === undefined) @@ -1031,6 +1033,8 @@ clsName = clsName.concat(before.classes.split(/\s+/)); if (before.tooltip) tooltip = before.tooltip; + if (before.displayDate) + displayDate = before.displayDate; } //Check if uniqueSort exists (supported by jquery >=1.12 and >=2.2) @@ -1041,7 +1045,7 @@ clsName = $.unique(clsName); } - html.push(''+prevMonth.getUTCDate() + ''); + html.push('' + displayDate + ''); tooltip = null; if (weekDay === this.o.weekEnd){ html.push(''); @@ -1196,6 +1200,10 @@ } if (!target.hasClass('disabled')){ + // Allow clicking on elements inside a day + if (target.parent().hasClass('day')) + target = target.parent(); + // Clicked on a day if (target.hasClass('day')){ day = Number(target.text()); From c5cafb5e2ae0c5bdb72145e42c58e1462d8dd534 Mon Sep 17 00:00:00 2001 From: Chris Hynes Date: Thu, 27 Oct 2016 17:03:20 -0700 Subject: [PATCH 2/4] Change beforeShowDay option name to content Add test for content --- docs/options.rst | 2 +- js/bootstrap-datepicker.js | 8 ++++---- tests/suites/options.js | 4 ++++ 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/docs/options.rst b/docs/options.rst index 68aee828b..2a12eed21 100644 --- a/docs/options.rst +++ b/docs/options.rst @@ -31,7 +31,7 @@ A function that takes a date as a parameter and returns one of the following val * ``enabled``: same as the Boolean value above * ``classes``: same as the String value above * ``tooltip``: a tooltip to apply to this date, via the ``title`` HTML attribute - * ``displayDate``: the value to display in the day cell, rather than the just the day of month + * ``content``: the content to display in the day cell, rather than the default (day of month as text) beforeShowMonth diff --git a/js/bootstrap-datepicker.js b/js/bootstrap-datepicker.js index 73fbbdba2..b6ee2f1f9 100644 --- a/js/bootstrap-datepicker.js +++ b/js/bootstrap-datepicker.js @@ -1017,7 +1017,7 @@ clsName = this.getClassNames(prevMonth); clsName.push('day'); - var displayDate = prevMonth.getUTCDate(); + var content = prevMonth.getUTCDate(); if (this.o.beforeShowDay !== $.noop){ before = this.o.beforeShowDay(this._utc_to_local(prevMonth)); @@ -1033,8 +1033,8 @@ clsName = clsName.concat(before.classes.split(/\s+/)); if (before.tooltip) tooltip = before.tooltip; - if (before.displayDate) - displayDate = before.displayDate; + if (before.content) + content = before.content; } //Check if uniqueSort exists (supported by jquery >=1.12 and >=2.2) @@ -1045,7 +1045,7 @@ clsName = $.unique(clsName); } - html.push('' + displayDate + ''); + html.push('' + content + ''); tooltip = null; if (weekDay === this.o.weekEnd){ html.push(''); diff --git a/tests/suites/options.js b/tests/suites/options.js index d7f9d441e..469178aaf 100644 --- a/tests/suites/options.js +++ b/tests/suites/options.js @@ -754,6 +754,8 @@ test('BeforeShowDay', function(){ return {enabled: false, classes:'test27'}; case 28: return false; + case 30: + return { content: "foo" + date.getDate() } } }; @@ -782,6 +784,8 @@ test('BeforeShowDay', function(){ ok(target.hasClass('disabled'), '28th is disabled'); target = picker.find('.datepicker-days tbody td:nth(29)'); ok(!target.hasClass('disabled'), '29th is enabled'); + target = picker.find('.datepicker-days tbody td:nth(30)'); + ok(target.text() == "foo30", '30th has custom content'); }); From c544da6baeb6aaab25a74e4f065ca37ebf0bef39 Mon Sep 17 00:00:00 2001 From: Chris Hynes Date: Thu, 27 Oct 2016 17:16:01 -0700 Subject: [PATCH 3/4] Handle deeper nested content in day Add test to check click on custom content --- js/bootstrap-datepicker.js | 6 ++++-- tests/suites/events.js | 26 ++++++++++++++++++++++++++ 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/js/bootstrap-datepicker.js b/js/bootstrap-datepicker.js index b6ee2f1f9..c781ff6b1 100644 --- a/js/bootstrap-datepicker.js +++ b/js/bootstrap-datepicker.js @@ -1201,8 +1201,10 @@ if (!target.hasClass('disabled')){ // Allow clicking on elements inside a day - if (target.parent().hasClass('day')) - target = target.parent(); + var day = target.parents('.day'); + + if (day.length) + target = day; // Clicked on a day if (target.hasClass('day')){ diff --git a/tests/suites/events.js b/tests/suites/events.js index 02b504909..b1d92d25c 100644 --- a/tests/suites/events.js +++ b/tests/suites/events.js @@ -479,3 +479,29 @@ test('Changing view mode triggers changeViewMode', function () { equal(viewMode, 4); }); + +test('Clicking inside content of date with custom beforeShowDay content works', function(){ + this.input = $('') + .appendTo('#qunit-fixture') + .datepicker({ + format: "dd-mm-yyyy", + beforeShowDay: function (date) { return { content: '
' + date.getDate() + '
' }; } + }) + .focus(); // Activate for visibility checks + this.dp = this.input.data('datepicker'); + this.picker = this.dp.picker; + + var target, + triggered = 0; + + this.input.on('changeDate', function(){ + triggered++; + }); + + // find deepest date + target = this.picker.find('.datepicker-days tbody td:first div div'); + target.click(); + + // ensure event has been triggered + equal(triggered, 1); +}); From 77af1d03f8ca15e09df237a86b0c2cbae48a936a Mon Sep 17 00:00:00 2001 From: Chris Hynes Date: Fri, 3 Feb 2017 11:28:48 -0700 Subject: [PATCH 4/4] Fix dupe variable name --- js/bootstrap-datepicker.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/bootstrap-datepicker.js b/js/bootstrap-datepicker.js index fcc714e13..0f2e69291 100644 --- a/js/bootstrap-datepicker.js +++ b/js/bootstrap-datepicker.js @@ -1199,10 +1199,10 @@ if (!target.hasClass('disabled')){ // Allow clicking on elements inside a day - var day = target.parents('.day'); + var findOuter = target.closest('.day'); - if (day.length) - target = day; + if (findOuter.length) + target = findOuter; // Clicked on a day if (target.hasClass('day')){