Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
feat(datepicker): add disabled and ngDisabled support
Browse files Browse the repository at this point in the history 
- Adds support for `disabled` attribute
- Adds support for `ng-disabled`

Closes #4059
Closes #4814
  • Loading branch information
@wesleycho
wesleycho committed Nov 3, 2015
1 parent 73efc78 commit 434c602
Show file tree
Hide file tree
Showing 2 changed files with 132 additions and 10 deletions.
44 changes: 34 additions & 10 deletions src/datepicker/datepicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,14 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
this.activeDate = new Date();
}

$scope.disabled = angular.isDefined($attrs.disabled) || false;
if (angular.isDefined($attrs.ngDisabled)) {
$scope.$parent.$watch($parse($attrs.ngDisabled), function(disabled) {
$scope.disabled = disabled;
self.refreshView();
});
}

$scope.isActive = function(dateObject) {
if (self.compare(dateObject.date, self.activeDate) === 0) {
$scope.activeDateId = dateObject.uid;
Expand Down Expand Up @@ -127,7 +135,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
};

this.isDisabled = function(date) {
return ((this.minDate && this.compare(date, this.minDate) < 0) || (this.maxDate && this.compare(date, this.maxDate) > 0) || ($attrs.dateDisabled && $scope.dateDisabled({date: date, mode: $scope.datepickerMode})));
return $scope.disabled || ((this.minDate && this.compare(date, this.minDate) < 0) || (this.maxDate && this.compare(date, this.maxDate) > 0) || ($attrs.dateDisabled && $scope.dateDisabled({date: date, mode: $scope.datepickerMode})));
};

this.customClass = function(date) {
Expand Down Expand Up @@ -185,7 +193,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
$scope.keydown = function(evt) {
var key = $scope.keys[evt.which];

if (!key || evt.shiftKey || evt.altKey) {
if (!key || evt.shiftKey || evt.altKey || $scope.disabled) {
return;
}

Expand Down Expand Up @@ -626,6 +634,7 @@ function(scope, element, attrs, $compile, $parse, $document, $rootScope, $positi
}
}
});

if (attrs.dateDisabled) {
datepickerEl.attr('date-disabled', 'dateDisabled({ date: date, mode: mode })');
}
Expand Down Expand Up @@ -743,17 +752,28 @@ function(scope, element, attrs, $compile, $parse, $document, $rootScope, $positi
element[0].focus();
};

scope.disabled = angular.isDefined(attrs.disabled) || false;
if (attrs.ngDisabled) {
scope.$parent.$watch($parse(attrs.ngDisabled), function(disabled) {
scope.disabled = disabled;
});
}

scope.$watch('isOpen', function(value) {
if (value) {
scope.position = appendToBody ? $position.offset(element) : $position.position(element);
scope.position.top = scope.position.top + element.prop('offsetHeight');
if (!scope.disabled) {
scope.position = appendToBody ? $position.offset(element) : $position.position(element);
scope.position.top = scope.position.top + element.prop('offsetHeight');

$timeout(function() {
if (onOpenFocus) {
scope.$broadcast('uib:datepicker.focus');
}
$document.bind('click', documentClickBind);
}, 0, false);
$timeout(function() {
if (onOpenFocus) {
scope.$broadcast('uib:datepicker.focus');
}
$document.bind('click', documentClickBind);
}, 0, false);
} else {
scope.isOpen = false;
}
} else {
$document.unbind('click', documentClickBind);
}
Expand Down Expand Up @@ -808,6 +828,10 @@ function(scope, element, attrs, $compile, $parse, $document, $rootScope, $positi
}

function documentClickBind(event) {
if (!scope.isOpen && scope.disabled) {
return;
}

var popup = $popup[0];
var dpContainsTarget = element[0].contains(event.target);
// The popup node may not be an element node
Expand Down
98 changes: 98 additions & 0 deletions src/datepicker/test/datepicker.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1226,6 +1226,47 @@ describe('datepicker directive', function() {
});
});

describe('disabled', function() {
beforeEach(function() {
element = $compile('<uib-datepicker ng-model="date" disabled></uib-datepicker>')($rootScope);
$rootScope.$digest();
});

it('should have all dates disabled', function() {
element.find('.uib-day button').each(function(idx, elem) {
expect($(elem).prop('disabled')).toBe(true);
});
});
});

describe('ng-disabled', function() {
beforeEach(function() {
$rootScope.disabled = false;
element = $compile('<uib-datepicker ng-model="date" ng-disabled="disabled"></uib-datepicker>')($rootScope);
$rootScope.$digest();
});

it('should toggle disabled state with value of ng-disabled', function() {
element.find('.uib-day button').each(function(idx, elem) {
expect($(elem).prop('disabled')).toBe(false);
});

$rootScope.disabled = true;
$rootScope.$digest();

element.find('.uib-day button').each(function(idx, elem) {
expect($(elem).prop('disabled')).toBe(true);
});

$rootScope.disabled = false;
$rootScope.$digest();

element.find('.uib-day button').each(function(idx, elem) {
expect($(elem).prop('disabled')).toBe(false);
});
});
});

describe('setting datepickerPopupConfig', function() {
var originalConfig = {};
beforeEach(inject(function(uibDatepickerPopupConfig) {
Expand Down Expand Up @@ -2040,6 +2081,63 @@ describe('datepicker directive', function() {
});
});

describe('with disabled', function() {
var wrapElement;

beforeEach(function() {
$rootScope.isOpen = false;
wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup ng-required="true" ng-change="changeHandler()" is-open="isOpen" disabled><div>')($rootScope);
$rootScope.$digest();
});

it('should not open the popup', function() {
$rootScope.isOpen = true;
$rootScope.$digest();

expect($rootScope.isOpen).toBe(false);
expect(wrapElement.find('ul').length).toBe(0);
});
});

describe('with ng-disabled', function() {
var wrapElement;

beforeEach(function() {
$rootScope.disabled = false;
$rootScope.isOpen = false;
wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup ng-required="true" ng-change="changeHandler()" is-open="isOpen" ng-disabled="disabled"><div>')($rootScope);
$rootScope.$digest();
});

it('should not open the popup when disabled', function() {
$rootScope.isOpen = true;
$rootScope.$digest();

expect($rootScope.isOpen).toBe(true);
expect(wrapElement.find('ul').length).toBe(1);

$rootScope.isOpen = false;
$rootScope.$digest();

expect($rootScope.isOpen).toBe(false);
expect(wrapElement.find('ul').length).toBe(0);

$rootScope.disabled = true;
$rootScope.isOpen = true;
$rootScope.$digest();

expect($rootScope.isOpen).toBe(false);
expect(wrapElement.find('ul').length).toBe(0);

$rootScope.disabled = false;
$rootScope.isOpen = true;
$rootScope.$digest();

expect($rootScope.isOpen).toBe(true);
expect(wrapElement.find('ul').length).toBe(1);
});
});

describe('with datepicker-popup-template-url', function() {
beforeEach(function() {
$rootScope.date = new Date();
Expand Down

0 comments on commit 434c602

Please sign in to comment.