From e24418cc239c0908e4182c21ad05e3582d140f85 Mon Sep 17 00:00:00 2001 From: Adam Albrecht Date: Tue, 26 Nov 2013 14:28:55 -0800 Subject: [PATCH] Added an 'on-change' attribute Calls the passed in functin when the model changes --- README.md | 3 ++- spec/basic-specs.coffee | 40 ++++++++++++++++++++++++++++++++++++++++ src/ng-quick-date.coffee | 16 +++++++++++----- 3 files changed, 53 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 18b1840..4ef86a9 100644 --- a/README.md +++ b/README.md @@ -41,8 +41,9 @@ There are a number of options that be configured inline with attributes. Here ar | placeholder | 'Click to Set Date' | Text that is shown on button when the model variable is null. | | hover-text | null | Hover text for button. | | icon-class | null | If set, `` will be prepended inside the button | -| disable-timepicker | false | If true, the timepicker will be disabled and the default label format will be just the date | +| disable-timepicker | false | If true, the timepicker will be disabled and the default label format will be just the date | | disable-clear-button | false | If true, the clear button will be removed | +| on-change | null | Set to a function that will be called when the date is changed | **Example:** diff --git a/spec/basic-specs.coffee b/spec/basic-specs.coffee index fc328ec..5fb3461 100644 --- a/spec/basic-specs.coffee +++ b/spec/basic-specs.coffee @@ -210,5 +210,45 @@ describe "ngQuickDate", -> expect(element.scope().ngModel).toEqual(null) + describe "Given a datepicker with an 'on-change' method to call", -> + mySpy = undefined + beforeEach(inject(($compile, $rootScope) -> + scope = $rootScope + scope.myVariable = 1 + scope.myOtherVariable = null + scope.myMethod = (param) -> + scope.myVariable += 1 + scope.myOtherVariable = param + + scope.myDate = new Date(2013, 5, 10) + element = $compile("")(scope) + scope.$apply() + )) + it 'should not be called initially', -> + expect(scope.myVariable).toEqual(1) + + # Can't get this spec to work + describe 'When the date input is changed', -> + beforeEach -> + $input = $(element).find('.quickdate-date-input') + scope.$apply -> + $input.val('1/5/2013') + $input.trigger('input') + $input.trigger('blur') + browserTrigger($input, 'input') + browserTrigger($input, 'change') + browserTrigger($input, 'blur') + + it 'should call the method once', -> + expect(scope.myVariable).toEqual(2) + expect(scope.myOtherVariable).toEqual('hello!') + + describe 'When the date input is blurred but not changed', -> + beforeEach -> + $input = $(element).find('.quickdate-date-input') + browserTrigger($input, 'change') + browserTrigger($input, 'blur') + it 'should not call the method', -> + expect(scope.myVariable).toEqual(1) diff --git a/src/ng-quick-date.coffee b/src/ng-quick-date.coffee index 874f7fb..210d572 100644 --- a/src/ng-quick-date.coffee +++ b/src/ng-quick-date.coffee @@ -46,6 +46,7 @@ app.directive "datepicker", ['ngQuickDateDefaults', '$filter', (ngQuickDateDefau require: "ngModel" scope: ngModel: "=" + onChange: "&" replace: true link: (scope, element, attrs, ngModel) -> @@ -179,27 +180,32 @@ app.directive "datepicker", ['ngQuickDateDefaults', '$filter', (ngQuickDateDefau scope.calendarShown = not scope.calendarShown scope.setDate = (date, closeCalendar=true) -> + changed = (!scope.ngModel && date) || (scope.ngModel && !date) || (date.getTime() != scope.ngModel.getTime()) scope.ngModel = date scope.toggleCalendar(false) + if changed && scope.onChange + scope.onChange() scope.setDateFromInput = (closeCalendar=false) -> try tmpDate = parseDateString(scope.inputDate) if !tmpDate throw 'Invalid Date' - if scope.inputTime and scope.inputTime.length and tmpDate + if !scope.disableTimepicker && scope.inputTime and scope.inputTime.length and tmpDate tmpTime = if scope.disableTimepicker then '00:00:00' else scope.inputTime tmpDateAndTime = parseDateString("#{scope.inputDate} #{tmpTime}") if !tmpDateAndTime throw 'Invalid Time' - scope.ngModel = tmpDateAndTime + scope.setDate(tmpDateAndTime, false) else - scope.ngModel = tmpDate + scope.setDate(tmpDate, false) + if closeCalendar scope.toggleCalendar(false) scope.inputDateErr = false scope.inputTimeErr = false + catch err if err == 'Invalid Date' scope.inputDateErr = true @@ -241,11 +247,11 @@ app.directive "datepicker", ['ngQuickDateDefaults', '$filter', (ngQuickDateDefau
- +
- +