diff --git a/.gitignore b/.gitignore index 452f454..4e96676 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ /.bower.json +*.swp diff --git a/bower.json b/bower.json index 9105e0f..0edc18a 100644 --- a/bower.json +++ b/bower.json @@ -1,11 +1,12 @@ { - "name": "angular-input-date", - "description": "AngularJS directive to enable support for input[type=\"date\"]", - "version": "1.0.4", + "name": "angular-input-date-extended rangeValidation", + "description": "AngularJS directive to enable support for input[type=\"date\"] added range validation, fork of betsol/angular-input-date", + "version": "1.0.8", "main": "src/angular-input-date.js", + "homepage":"https://github.com/sergicollado/angular-input-date", "dependencies": { "angular": "~1.2.26" }, "devDependencies": { } -} \ No newline at end of file +} diff --git a/readme.md b/readme.md index e80adae..48d4252 100644 --- a/readme.md +++ b/readme.md @@ -1,4 +1,4 @@ -# angular-input-date 1.0.4 +# angular-input-date 1.0.5 This module provides a very simple directive to enable support for `input[type="date"]` with the latest stable version of AngularJS (`~1.2.26`). @@ -84,16 +84,21 @@ application.controller('AppCtrl', function($scope, someExistingDate, inputDate) You have to inject our service called `inputDate` and invoke it's `ExtractDate` method. It will return proper timeless `Date` object. -## Feedback +## Ranges validation -If you have found a bug - please create an issue in this GitHub repository. - -If you have a question - file it with [StackOverflow][so-ask] and send me a -link to [s.fomin@betsol.ru][email]. +``` html + +``` -Have any ideas or propositions? Feel free to contact me by the same [E-Mail address][email]. +You can specify scope value in your controller like this: -Cheers! +``` javascript +application.controller('AppCtrl', function($scope) { + $scope.myDateObject = new Date(2014, 3, 19); + $scope.startDate = new Date(2014, 3, 16); + $scope.endDate = new Date(2014, 3, 23); +}); +``` ## License @@ -122,4 +127,4 @@ THE SOFTWARE. [mdn-date]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date [demo]: http://jsfiddle.net/slavafomin/F2LcY/4/ [so-ask]: http://stackoverflow.com/questions/ask?tags=angularjs,javascript -[email]: mailto:s.fomin@betsol.ru \ No newline at end of file +[email]: mailto:s.fomin@betsol.ru diff --git a/src/angular-input-date.js b/src/angular-input-date.js index 31786ad..cd41cea 100644 --- a/src/angular-input-date.js +++ b/src/angular-input-date.js @@ -3,6 +3,14 @@ var inputDateFormat = 'yyyy-MM-dd'; + /** + * Check varible or object to 'is undefined', 'is empty' or 'is null' + * @param obj + */ + angular.isUndefinedOrNullOrEmpty = function (obj) { + return angular.isUndefined(obj) || obj === null || obj.length === 0 || typeof obj === 'object' && Object.keys(obj).length === 0; + }; + /** * Converts string representation of date to a Date object. * @@ -44,33 +52,106 @@ ); } + /** + * Check variable is instace of Date and return Date obj * + * @param date + * @constructor + */ + var formatDate = function(date){ + if(!(date instanceof Date) && angular.isDefined(date)){ + date = new Date(date); + } + return date; + }; + + /** + * Valide selected date is between range * + * I.e. truncates time part. + * @param selectedDate,minLimit,maxLimit + * @constructor + */ + function validationRange(selectedDate,minLimit, maxLimit){ + var dateToCompare = selectedDate; + if(angular.isUndefined(dateToCompare)) { + return true; + } + + dateToCompare = formatDate(selectedDate); + minLimit = formatDate(minLimit); + maxLimit = formatDate(maxLimit); + + var minLimitError = (angular.isDefined(minLimit) && minLimit && dateToCompare < minLimit); + var maxLimitError = (angular.isDefined(maxLimit) && maxLimit && dateToCompare > maxLimit); + + if(!dateToCompare || minLimitError || maxLimitError){ + return false; + } + return true; + } + + /** + * Valide selected date required + * @param selectedDate,isRequired + * @constructor + */ + function validationRequired(selectedDate, isRequired) { + if(!isRequired || angular.isUndefined(isRequired)){ + return true; + } + return !(angular.isUndefinedOrNullOrEmpty(selectedDate)); + } + angular.module('ngInputDate', ['ng']) .factory('inputDate', function() { return { ExtractDate: ExtractDate }; }) - .directive('input', ['dateFilter', function(dateFilter) { + .directive('dateOptions',function(){ + + return { + restrict: 'A', + scope:{ + isRequired: '=?ngRequired', + minLimit: '=', + maxLimit: '=' + }, + require: '?ngModel', + link: function(scope, element, attrs, ngModel) { + ngModel.$setValidity('required',validationRequired(ngModel.$modelValue, scope.isRequired)); + + ngModel.$formatters.push(function(modelValue) { + ngModel.$setValidity('required',validationRequired(modelValue, scope.isRequired)); + ngModel.$setValidity('range', validationRange(modelValue, scope.minLimit, scope.maxLimit)); + return modelValue; + }); + ngModel.$parsers.push(function(viewValue) { + ngModel.$setValidity('required',validationRequired(viewValue, scope.isRequired)); + ngModel.$setValidity('range', validationRange(viewValue, scope.minLimit, scope.maxLimit)); + return viewValue; + }); + + } + }; + }) + .directive('input', ['dateFilter','inputDate', function(dateFilter, inputDate) { return { restrict: 'E', require: '?ngModel', link: function(scope, element, attrs, ngModel) { - if ( - 'undefined' !== typeof attrs.type - && 'date' === attrs.type - && ngModel - ) { - ngModel.$formatters.push(function(modelValue) { - return dateFilter(modelValue, inputDateFormat); - }); - - ngModel.$parsers.push(function(viewValue) { - return parseDateString(viewValue); - }); + if (angular.isUndefined(attrs.type) || + 'date' !== attrs.type || !ngModel || !inputDate.enabled) { + return; } + ngModel.$formatters.push(function(modelValue) { + return dateFilter(modelValue, inputDateFormat); + }); + + ngModel.$parsers.push(function(viewValue) { + return parseDateString(viewValue); + }); } - } - }]) - ; + }; + }]) ; -})(window, angular); \ No newline at end of file +})(window, angular);