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

fix(datepicker): MinMaxInputValidation #3606

Closed
wants to merge 1 commit into from
Closed

fix(datepicker): MinMaxInputValidation #3606

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 81 additions & 3 deletions src/datepicker/datepicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,9 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
datepickerMode: '=?',
dateDisabled: '&',
customClass: '&',
shortcutPropagation: '&?'
shortcutPropagation: '&?',
minDate: '@',
maxDate: '@'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These new bindings should be optional

},
require: ['datepicker', '?^ngModel'],
controller: 'DatepickerController',
Expand Down Expand Up @@ -577,6 +579,62 @@ function ($compile, $parse, $document, $position, dateFilter, dateParser, datepi
datepickerEl.attr('custom-class', 'customClass({ date: date, mode: mode })');
}

function compareDates(date1, date2) {
if (isNaN(date1) || isNaN(date2)) {
return undefined;
}
else {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Move else one line up

return (new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()) - new Date(date2.getFullYear(), date2.getMonth(), date2.getDate()) );
}
}

function getDateLimitToCheck(limitName) {
var watchDate = scope.watchData[limitName];
if (!watchDate) {
return null;
} else {
return new Date(watchDate);
}
}

function isDateLimitMet(limitName, dateToCheck, viewValue) {
var parsedDate = dateParser.parse(viewValue, dateFormat);
var dateCompare = compareDates(parsedDate, dateToCheck);
if (limitName == 'minDate') {
return !dateCompare || dateCompare > 0;
} else if (limitName == 'maxDate') {
return !dateCompare || dateCompare < 0;
}
}

function dateLimitParseFormat(limitName, viewValue, isFormatOnly) {
var dateLimit = getDateLimitToCheck(limitName);
if (dateLimit) {
var isMet = isDateLimitMet(limitName, dateLimit, viewValue);
ngModel.$setValidity(limitName, isMet);
return (isFormatOnly || isMet) ? viewValue : undefined;
} else {
return viewValue;
}
}

function minLimitParse(viewValue) {
return dateLimitParseFormat('minDate', viewValue, false);
}

function minLimitFormat(viewValue) {
return dateLimitParseFormat('minDate', viewValue, true);
}

function maxLimitParse(viewValue) {
return dateLimitParseFormat('maxDate', viewValue, false);
}

function maxLimitFormat(viewValue) {
return dateLimitParseFormat('maxDate', viewValue, true);
}


function parseDate(viewValue) {
if (angular.isNumber(viewValue)) {
// presumably timestamp to date object
Expand Down Expand Up @@ -616,14 +674,34 @@ function ($compile, $parse, $document, $position, dateFilter, dateParser, datepi
}
}

function parsing(viewValue) {
var result = parseDate(viewValue);
if (result) {
var minMet = minLimitParse(viewValue);
var maxMet = maxLimitParse(viewValue);
result = (minMet && maxMet) ? result : undefined;
}
return result;
}

if (!isHtml5DateInput) {
// Internal API to maintain the correct ng-invalid-[key] class
ngModel.$$parserName = 'date';
ngModel.$validators.date = validator;
ngModel.$parsers.unshift(parseDate);
ngModel.$parsers.unshift(parsing);
ngModel.$formatters.push(function (value) {
scope.date = value;
return ngModel.$isEmpty(value) ? value : dateFilter(value, dateFormat);
if (ngModel.$isEmpty(value)) {
return value;
}
else {
value = minLimitFormat(value);
if (value) {
value = maxLimitFormat(value);
}
value = maxLimitFormat(value);
return dateFilter(value, dateFormat);
}
});
}
else {
Expand Down
4 changes: 2 additions & 2 deletions src/datepicker/docs/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ <h4>Popup</h4>

<div class="col-md-6">
<p class="input-group">
<input type="date" class="form-control" datepicker-popup ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<input type="date" class="form-control" datepicker-popup ng-model="pickerDate.dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
Expand All @@ -49,4 +49,4 @@ <h4>Popup</h4>
<button type="button" class="btn btn-sm btn-default" ng-click="dt = '2009-08-24'">2009-08-24</button>
<button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
<button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" tooltip="After today restriction">Min date</button>
</div>
</div>
4 changes: 2 additions & 2 deletions src/datepicker/docs/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
$scope.today = function() {
$scope.dt = new Date();
$scope.pickerDate.dt = new Date();
};
$scope.today();

$scope.clear = function () {
$scope.dt = null;
$scope.pickerDate.dt = null;
};

// Disable weekend selection
Expand Down
78 changes: 77 additions & 1 deletion src/datepicker/test/datepicker.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1199,8 +1199,12 @@ describe('datepicker directive', function () {
$document = _$document_;
$sniffer = _$sniffer_;
$rootScope.isopen = true;
$rootScope.format='yyyy-MM-dd';
$rootScope.date = new Date('September 30, 2010 15:30:00');
var wrapElement = $compile('<div><input ng-model="date" datepicker-popup is-open="isopen"><div>')($rootScope);
$rootScope.minimumDate = new Date('January 1, 1970');
$rootScope.maximumDate = new Date('January 1, 2020');
$rootScope.dateDisabledHandler = jasmine.createSpy('dateDisabledHandler');
var wrapElement = $compile('<div><input ng-model="date" min-date = "minimumDate" max-date = "maximumDate" date-disabled="dateDisabledHandler(date, mode)" datepicker-popup="{{format}}" is-open="isopen"><div>')($rootScope);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change should be tested separately from the existing test suites.

$rootScope.$digest();
assignElements(wrapElement);
}));
Expand Down Expand Up @@ -1238,8 +1242,46 @@ describe('datepicker directive', function () {
$rootScope.date = new Date('January 10, 1983 10:00:00');
$rootScope.$digest();
expect(inputEl.val()).toBe('1983-01-10');
expect(inputEl).not.toHaveClass('ng-invalid');
expect(inputEl).not.toHaveClass('ng-invalid-min-date');
expect(inputEl).not.toHaveClass('ng-invalid-max-date');
});

it('updates the input correctly when model changes to a date prior to minimum date', function() {
$rootScope.date = new Date('January 10, 1963 10:00:00');
$rootScope.$digest();
expect(inputEl.val()).toBe('1963-01-10');
expect(inputEl).toHaveClass('ng-invalid');
expect(inputEl).toHaveClass('ng-invalid-min-date');
expect(inputEl).not.toHaveClass('ng-invalid-max-date');
});

it('input is not marked with invalid minimum date when minimum is not a valid date', function() {
expect(inputEl).not.toHaveClass('ng-invalid-min-date');
$rootScope.minimumDate = 'pizza';
$rootScope.$digest();
expect(inputEl).not.toHaveClass('ng-invalid-min-date');
expect(inputEl).not.toHaveClass('ng-invalid-date');
});

it('updates the input correctly when model changes to a date past the maximum date', function() {
$rootScope.date = new Date('January 10, 2023 10:00:00');
$rootScope.$digest();
expect(inputEl.val()).toBe('2023-01-10');
expect(inputEl).toHaveClass('ng-invalid');
expect(inputEl).toHaveClass('ng-invalid-max-date');
expect(inputEl).not.toHaveClass('ng-invalid-min-date');
expect(inputEl).not.toHaveClass('ng-invalid-date');
});

it('input is not marked with invalid maximum date when maximum is not a valid date', function() {
expect(inputEl).not.toHaveClass('ng-invalid-max-date');
$rootScope.maximumDate = new Date('pizza');
$rootScope.$digest();
expect(inputEl).not.toHaveClass('ng-invalid-max-date');
});


it('closes the dropdown when a day is clicked', function() {
expect(dropdownEl.css('display')).not.toBe('none');

Expand Down Expand Up @@ -1290,6 +1332,40 @@ describe('datepicker directive', function () {
expect(inputEl).not.toHaveClass('ng-invalid');
expect(inputEl).not.toHaveClass('ng-invalid-date');
});
it('sets `ng-invalid` for date prior to minimum date', function() {
changeInputValueTo(inputEl, '1960-12-01');

expect(inputEl).toHaveClass('ng-invalid');
expect(inputEl).toHaveClass('ng-invalid-min-date');
expect(inputEl).not.toHaveClass('ng-invalid-max-date');
expect(inputEl).toHaveClass('ng-invalid-date');
expect($rootScope.date).toBeUndefined();
expect(inputEl.val()).toBe('1960-12-01');
});

it('sets `ng-invalid` for date (european format) prior to minimum date', function() {
$rootScope.format='dd.MM.yyyy';
$rootScope.$digest();
changeInputValueTo(inputEl, '20.12.1960');

expect(inputEl).toHaveClass('ng-invalid');
expect(inputEl).toHaveClass('ng-invalid-min-date');
expect(inputEl).not.toHaveClass('ng-invalid-max-date');
expect(inputEl).toHaveClass('ng-invalid-date');
expect($rootScope.date).toBeUndefined();
expect(inputEl.val()).toBe('20.12.1960');
});

it('sets `ng-invalid` for date past the maximum date', function() {
changeInputValueTo(inputEl, '2050-12-01');

expect(inputEl).toHaveClass('ng-invalid');
expect(inputEl).not.toHaveClass('ng-invalid-min-date');
expect(inputEl).toHaveClass('ng-invalid-max-date');
expect(inputEl).toHaveClass('ng-invalid-date');
expect($rootScope.date).toBeUndefined();
expect(inputEl.val()).toBe('2050-12-01');
});

describe('focus', function () {
beforeEach(function() {
Expand Down