Implement ngMinModel and ngMaxModel attributes

jfmdev · May 29, 2017 · e8bce6b · e8bce6b
1 parent ea59f7e
commit e8bce6b
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 50 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "ngComboDatePicker",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "authors": [
     "jfmdev <[email protected]>"
   ],

diff --git a/demo/index.html b/demo/index.html
@@ -80,6 +80,9 @@ <h3>To empty value</h3>
 
 
             <h2>Define minimum and maximum dates</h2>
+
+
+            <h3>Statically</h3>
             <script type="text/javascript">
                 app.controller('minAndMaxCtrl', function ($scope) {
                     $scope.range = new Date();
@@ -91,6 +94,23 @@ <h2>Define minimum and maximum dates</h2>
             </div>
 
 
+            <h3>Dynamically</h3>
+            <script type="text/javascript">
+                app.controller('minAndMaxDynCtrl', function ($scope) {
+                    var now = new Date();
+                    $scope.dyn_range = new Date();
+                    $scope.dyn_min = new Date(now.getTime() - 5*365*24*60*60*1000);
+                    $scope.dyn_max = new Date(now.getTime() - 1*365*24*60*60*1000);
+                });
+            </script>
+            <div ng-controller="minAndMaxDynCtrl">
+                <p>Minimum date: <ng-combo-date-picker ng-model="dyn_min"></ng-combo-date-picker></p>
+                <p>Maximum date: <ng-combo-date-picker ng-model="dyn_max"></ng-combo-date-picker></p>
+                <p>Choose a date: <ng-combo-date-picker ng-model="dyn_range" ng-min-model="dyn_min" ng-max-model="dyn_max"></ng-combo-date-picker></p>
+                <p>Current selection is: <strong>{{ dyn_range }}</strong><p/>
+            </div>
+
+
             <h2>Change strings for months</h2>
             <script type="text/javascript">
                 app.controller('monthStringsCtrl', function ($scope) {
@@ -116,7 +136,7 @@ <h3>Styles</h3>
                 <p>Current selection is: <strong>{{ attrs }}</strong><p/>
             </div>
 
-            <h2>Classes</h2>
+            <h3>Classes</h3>
 
              <script type="text/javascript">
                  app.controller('classesCtrl', function ($scope) {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng-combo-date-picker",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "An Angular directive to select dates using combo boxes",
   "main": "source/ngComboDatePicker.js",
   "scripts": {
@@ -28,6 +28,6 @@
   "homepage": "http://jfmdev.github.io/ngComboDatePicker/",
   "devDependencies": {
     "uglify-save-license": "^0.4.1",
-    "uglifyjs": "^2.4.10"
+    "uglify-js": "^2.4.10"
   }
 }
diff --git a/readme.md b/readme.md
@@ -49,17 +49,19 @@ The _ngComboDatePicker_ directive supports the following attributes:
 Name | Description
 ------------- | ----
 `ngModel`  | (mandatory) A _Date_ object in which the picked date is going to be stored. This attribute can also be used to define the initial value of the picker.
-`ngDate`  | A string representing the initial date of the picker.
-`ngMinDate`  | A _string_ representing the minimum date that can be picked. By default the minimum date is 100 years before the current day.
-`ngMaxDate`  | A _string_ representing the maximum date that can be picked. By default the maximum date is the current day.
+`ngDate`  | A _string_ representing the initial date of the picker. Note that this value is read only once, when loading the component, so if you plan to change this value dynamically, then you should use the attribute `ngModel` instead.
+`ngMinDate`  | A _string_ representing the minimum date that can be picked. By default the minimum date is 100 years before the current date. Note that this value is read only once, when loading the component, so if you plan to change this value dynamically, then you should use the attribute `ngMinModel` instead.
+`ngMaxDate`  | A _string_ representing the maximum date that can be picked. By default the maximum date is the current date. Note that this value is read only once, when loading the component, so if you plan to change this value dynamically, then you should use the attribute `ngMaxModel` instead.
+`ngMinModel`  | A _Date_ object indicating the minimum date that can be picked. By default the minimum date is 100 years before the current date.
+`ngMaxModel`  | A _Date_ object indicating the maximum date that can be picked. By default the maximum date is the current date.
+`ngTimezone`  | A _number_ indicating the timezone to be used when converting a string or an integer to a date. By default the timezone of the client is used. 
 `ngMonths`  | A _string_ with the names of the twelve months, separated by comma. 
 `ngOrder`  | A _string_ with the characters "d", "m" and "y" indicating in which order the combo boxes must be displayed. By default, the combo boxes are displayed in the order "dmy".
-`ngAttrsDate`  | A JSON object with the attributes (such as `class` or `style`) to add to the `select` element for the date. 
-`ngAttrsMonth`  | A JSON object with the attributes (such as `class` or `style`) to add to the `select` element for the month. 
-`ngAttrsYear`  | A JSON object with the attributes (such as `class` or `style`) to add to the `select` element for the year. 
+`ngAttrsDate`  | A _JSON_ object with the attributes (such as `class` or `style`) to add to the `select` element for the date. 
+`ngAttrsMonth`  | A _JSON_ object with the attributes (such as `class` or `style`) to add to the `select` element for the month. 
+`ngAttrsYear`  | A _JSON_ object with the attributes (such as `class` or `style`) to add to the `select` element for the year. 
 `ngDisabled`  | A _boolean_, or an _array_ of three booleans, indicating if the combo boxes should be rendered as disabled. 
 `ngYearOrder`  | A _string_ indicating if the years must be sorted in "ascending" or "descending" order. 
-`ngTimezone`  | A _number_ indicating the timezone to be used when converting a string or an integer to a date. By default the timezone of the client is used. 
 `ngPlaceholder`  | A _string_ with the placeholders for the year, month and date combo boxes (in that order), separated by comma. 
 `ngPlaceholderEnabled`  | A _boolean_ that allows to enable or disable the placeholder at runtime. 
 `ngRequired`  | A _boolean_ indicating if the component should be considered invalid if any of his combo boxes is empty. 

diff --git a/scripts/minify.js b/scripts/minify.js
@@ -1,6 +1,6 @@
 // Load dependencies.
 const fs = require('fs');
-const UglifyJS = require('uglifyjs');
+const UglifyJS = require('uglify-js');
 const SaveLicense = require('uglify-save-license');
 
 // Minify code.

diff --git a/source/ngComboDatePicker.js b/source/ngComboDatePicker.js
@@ -1,5 +1,5 @@
 /*
- * ngComboDatePicker v1.4.1
+ * ngComboDatePicker v1.5.0
  * http://github.com/jfmdev/ngComboDatePicker
  * «Copyright 2015 Jose F. Maldonado»
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/.
@@ -72,23 +72,27 @@ angular.module("ngComboDatePicker", [])
             ngDate : '@',
             ngMinDate : '@',
             ngMaxDate : '@',
+            ngMinModel : '=?',
+            ngMaxModel : '=?',
             ngMonths : '@',
+            ngTimezone: '@',
             ngOrder: '@',
             ngAttrsDate: '@',
             ngAttrsMonth: '@',
             ngAttrsYear: '@',
-            ngDisabled: '=',
+            ngDisabled: '=?',
             ngYearOrder: '@',
-            ngTimezone: '@',
             ngPlaceholder: '@',
             ngPlaceholderEnabled: '@',
             ngRequired: '@'
         },
         require: 'ngModel',
         controller: ['$scope', function($scope) {
-            // Initialize model.  
+            // Initialize models.
             $scope.ngModel = parseDate($scope.ngModel, $scope.ngTimezone);
-
+            $scope.ngMinModel = parseDate($scope.ngMinModel, $scope.ngTimezone);
+            $scope.ngMaxModel = parseDate($scope.ngMaxModel, $scope.ngTimezone);
+
             // Initialize attributes variables.
             $scope.ngAttrsDate = parseJsonPlus($scope.ngAttrsDate);
             $scope.ngAttrsMonth = parseJsonPlus($scope.ngAttrsMonth);
@@ -106,20 +110,44 @@ angular.module("ngComboDatePicker", [])
             }
 
             // Initialize minimal and maximum values.
-            $scope.minDate = parseDate($scope.ngMinDate, $scope.ngTimezone);
-            if($scope.minDate == null) {
+            if($scope.ngMinDate) {
+                $scope.ngMinModel = parseDate($scope.ngMinDate, $scope.ngTimezone);
+            }
+            if(!$scope.ngMinModel) {
                 var now = new Date();
-                $scope.minDate = new Date(now.getFullYear()-100, now.getMonth(), now.getDate(),
+                $scope.ngMinModel = new Date(now.getFullYear()-100, now.getMonth(), now.getDate(),
                                           now.getHours(), now.getMinutes(), now.getSeconds(), now.getMilliseconds());
             }
-            $scope.maxDate = parseDate($scope.ngMaxDate, $scope.ngTimezone);
-            if($scope.maxDate == null) {
-                $scope.maxDate = new Date();
+            if($scope.ngMaxDate) {
+                $scope.ngMaxModel = parseDate($scope.ngMaxDate, $scope.ngTimezone);
             }
+            if(!$scope.ngMaxModel) {
+                $scope.ngMaxModel = new Date();
+            }
+
+            // Watch for changes in the minimum and maximum dates.
+            $scope.$watch('[ngMinModel, ngMaxModel]', function() {
+                // Update list of years (if possible).
+                if($scope.ngMinModel && $scope.ngMaxModel) {
+                    // Get list of years.
+                    $scope.years = [];
+                    for(var i=$scope.ngMinModel.getFullYear(); i<=$scope.ngMaxModel.getFullYear(); i++) {
+                        $scope.years.push({value:i, name:i});
+                    }
+
+                    // Verify if the order of the years must be reversed.
+                    if(typeof $scope.ngYearOrder == 'string' && $scope.ngYearOrder.indexOf('des') == 0) {
+                        $scope.years.reverse();
+                    }
 
-            // Verify if selected date is in the valid range.
-            if($scope.ngModel < $scope.minDate) $scope.ngModel = $scope.minDate;
-            if($scope.ngModel > $scope.maxDate) $scope.ngModel = $scope.maxDate;
+                    // Prepend the years placeholder
+                    if($scope.placeHolders) $scope.years.unshift($scope.placeHolders[0]);
+                }
+
+                // Verify if selected date is in the valid range.
+                if($scope.ngMinModel &&$scope.ngModel < $scope.ngMinModel) $scope.ngModel = $scope.ngMinModel;
+                if($scope.ngMaxModel && $scope.ngModel > $scope.ngMaxModel) $scope.ngModel = $scope.ngMaxModel;
+            });
 
             // Initialize place holders.
             $scope.placeHolders = null;
@@ -133,20 +161,6 @@ angular.module("ngComboDatePicker", [])
                 }
             }
 
-            // Initialize list of years.
-            $scope.years = [];
-            for(var i=$scope.minDate.getFullYear(); i<=$scope.maxDate.getFullYear(); i++) {
-                $scope.years.push({value:i, name:i});
-            }
-
-            // Verify if the order of the years must be reversed.
-            if(typeof $scope.ngYearOrder == 'string' && $scope.ngYearOrder.indexOf('des') == 0) {
-                $scope.years.reverse();
-            }
-
-            // Prepend the years placeholder
-            if($scope.placeHolders) $scope.years.unshift($scope.placeHolders[0]);
-
             // Initialize list of months names.
             var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
             if($scope.ngMonths !== undefined && $scope.ngMonths !== null) {
@@ -165,8 +179,8 @@ angular.module("ngComboDatePicker", [])
                 year = parseIntStrict(year);
 
                 // Some months can not be choosed if the year matchs with the year of the minimum or maximum dates.
-                var start = year !== null && year == $scope.minDate.getFullYear()? $scope.minDate.getMonth() : 0;
-                var end = year !== null && year == $scope.maxDate.getFullYear()? $scope.maxDate.getMonth() : 11;
+                var start = year !== null && year == $scope.ngMinModel.getFullYear()? $scope.ngMinModel.getMonth() : 0;
+                var end = year !== null && year == $scope.ngMaxModel.getFullYear()? $scope.ngMaxModel.getMonth() : 11;
 
                 // Generate list.
                 $scope.months = [];
@@ -184,16 +198,16 @@ angular.module("ngComboDatePicker", [])
 
                 // Start date is 1, unless the selected month and year matchs the minimum date.
                 var start = 1;
-                if(month !== null && month == $scope.minDate.getMonth() && 
-                   year !== null && year == $scope.minDate.getFullYear()) {
-                    start = $scope.minDate.getDate();
+                if(month !== null && month == $scope.ngMinModel.getMonth() && 
+                   year !== null && year == $scope.ngMinModel.getFullYear()) {
+                    start = $scope.ngMinModel.getDate();
                 }
 
                 // End date is 30 or 31 (28 or 29 in February), unless the selected month and year matchs the maximum date.
                 var end = maxDate(month !== null? (month+1) : null, year);
-                if(month !== null && month == $scope.maxDate.getMonth() && 
-                   year !== null && year == $scope.maxDate.getFullYear()) {
-                    end = $scope.maxDate.getDate();
+                if(month !== null && month == $scope.ngMaxModel.getMonth() && 
+                   year !== null && year == $scope.ngMaxModel.getFullYear()) {
+                    end = $scope.ngMaxModel.getDate();
                 }
 
                 // Generate list.