From bdf466846808bdbf620bc50a1a5f60434a7ad90e Mon Sep 17 00:00:00 2001 From: kevinparkerson Date: Tue, 12 Jan 2016 18:42:30 -0500 Subject: [PATCH] fixes #1671 by having the calendar with the selected date visible when the datepicker is shown. If no selected date is present today's date is used. Also adds show and hide methods, along with 'shown' and 'hidden' events --- js/datepicker.js | 29 +++++++++++++++++++------- test/datepicker-test.js | 45 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 67 insertions(+), 7 deletions(-) diff --git a/js/datepicker.js b/js/datepicker.js index 021fede2e..2c0045009 100644 --- a/js/datepicker.js +++ b/js/datepicker.js @@ -70,6 +70,7 @@ this.$header = this.$calendar.find('.datepicker-calendar-header'); this.$headerTitle = this.$header.find('.title'); this.$input = this.$element.find('input'); + this.$inputGroupBtn = this.$element.find('.input-group-btn'); this.$wheels = this.$element.find('.datepicker-wheels'); this.$wheelsMonth = this.$element.find('.datepicker-wheels-month'); this.$wheelsYear = this.$element.find('.datepicker-wheels-year'); @@ -95,6 +96,8 @@ this.$headerTitle.on('click.fu.datepicker', $.proxy(this.titleClicked, this)); this.$input.on('change.fu.datepicker', $.proxy(this.inputChanged, this)); this.$input.on('mousedown.fu.datepicker', $.proxy(this.showDropdown, this)); + this.$inputGroupBtn.on('hidden.bs.dropdown', $.proxy(this.hide, this)); + this.$inputGroupBtn.on('shown.bs.dropdown', $.proxy(this.show, this)); this.$wheels.find('.datepicker-wheels-back').on('click.fu.datepicker', $.proxy(this.backClicked, this)); this.$wheels.find('.datepicker-wheels-select').on('click.fu.datepicker', $.proxy(this.selectClicked, this)); this.$wheelsMonth.on('click.fu.datepicker', 'ul button', $.proxy(this.monthClicked, this)); @@ -186,7 +189,7 @@ this.selectedDate = date; this.$input.val(this.formatDate(date)); this.inputValue = this.$input.val(); - this.hideDropdown(); + this.hide(); this.$input.focus(); this.$element.trigger('dateClicked.fu.datepicker', date); }, @@ -206,7 +209,7 @@ disable: function () { this.$element.addClass('disabled'); this.$element.find('input, button').attr('disabled', 'disabled'); - this.$element.find('.input-group-btn').removeClass('open'); + this.$inputGroupBtn.removeClass('open'); }, enable: function () { @@ -271,14 +274,26 @@ } }, - showDropdown: function (e) { - if (!this.$input.is(':focus')){ - this.$element.find('.input-group-btn').addClass('open'); + show: function () { + var date = (this.selectedDate) ? this.selectedDate : new Date(); + this.changeView('calendar', date); + this.$inputGroupBtn.addClass('open'); + this.$element.trigger('shown.fu.datepicker'); + }, + + showDropdown: function (e) { //input mousedown handler, name retained for legacy support of showDropdown + if (!this.$input.is(':focus') && !this.$inputGroupBtn.hasClass('open')) { + this.show(); } }, - hideDropdown: function () { - this.$element.find('.input-group-btn').removeClass('open'); + hide: function () { + this.$inputGroupBtn.removeClass('open'); + this.$element.trigger('hidden.fu.datepicker'); + }, + + hideDropdown: function () { //for legacy support of hideDropdown + this.hide(); }, isInvalidDate: function (date) { diff --git a/test/datepicker-test.js b/test/datepicker-test.js index 0fa13527f..90988f7c9 100644 --- a/test/datepicker-test.js +++ b/test/datepicker-test.js @@ -176,6 +176,51 @@ define(function(require){ equal(errors.setFormat, defaultErrorReturned, 'setFormat is not available for use'); }); + test('should show datepicker', function () { + var $datepicker = $(html).datepicker({ + date: new Date(1987, 2, 31) + }); + + $datepicker.on('shown.fu.datepicker', function () { + ok(1===1, 'shown event thrown as expected'); + equal($datepicker.find('.input-group-btn').hasClass('open'), true, 'datepicker shown as expected'); + }); + $datepicker.datepicker('show'); + }); + + test('should hide datepicker', function () { + var $datepicker = $(html).datepicker({ + date: new Date(1987, 2, 31) + }); + + $datepicker.on('hidden.fu.datepicker', function () { + ok(1===1, 'hidden event thrown as expected'); + equal($datepicker.find('.input-group-btn').hasClass('open'), false, 'datepicker hidden as expected'); + }); + $datepicker.datepicker('show'); + $datepicker.datepicker('hide'); + }); + + test('should open with calendar showing selected date', function () { + var attrMonth = 'data-month'; + var attrYear = 'data-year'; + var $datepicker = $(html).datepicker({ + date: new Date(1987, 2, 31) + }); + var $title = $datepicker.find('.datepicker-calendar-header .title'); + + $datepicker.datepicker('show'); + equal(($title.attr(attrMonth) === '2' && $title.attr(attrYear) === '1987'), true, 'selected date showing initially'); + $datepicker.find('.datepicker-calendar-header .next').click().click(); + $datepicker.datepicker('hide'); + $datepicker.datepicker('show'); + equal(($title.attr(attrMonth) === '2' && $title.attr(attrYear) === '1987'), true, 'selected date showing after switching through months'); + $title.click(); + $datepicker.datepicker('hide'); + $datepicker.datepicker('show'); + equal(($title.attr(attrMonth) === '2' && $title.attr(attrYear) === '1987'), true, 'selected date showing after entering wheel view'); + }); + test('should restrict navigation and selection of dates within other years if option sameYearOnly is set to true', function() { var $datepicker = $(html).datepicker({ date: new Date(1987, 2, 31),