fng-bootstrap-datetime 0.12.0-beta.36 → 0.12.0-beta.360

package/fng-bootstrap-datetime.js

@@ -55,7 +55,7 @@ angular.module('ui.bootstrap.datetimepicker', ["ui.bootstrap.dateparser", "ui.bo
           hiddenDate: "=",
           datepickerTemplateUrl: "@",
           datepickerPopupTemplateUrl: "@",
-          timepickerTemplateUrl: "@"
+          timepickerTemplateUrl: "@",
         },
         template: function (elem, attrs) {
           function dashCase(name) {
@@ -67,9 +67,10 @@ angular.module('ui.bootstrap.datetimepicker', ["ui.bootstrap.dateparser", "ui.bo
           function createAttr(innerAttr, dateTimeAttrOpt) {
             var dateTimeAttr = angular.isDefined(dateTimeAttrOpt) ? dateTimeAttrOpt : innerAttr;
             if (attrs[dateTimeAttr]) {
-              return dashCase(innerAttr) + "=\"" + dateTimeAttr + "\" ";
-            } else if (dateTimeAttr in attrs) { // attribute with an empty value such as "required"
-              return dateTimeAttr + " ";
+              return `${dashCase(innerAttr)}="${attrs[dateTimeAttr]}" `;
+            } else if (dateTimeAttr in attrs) { 
+              // attribute with an empty value such as "required"
+              return `${dateTimeAttr} `;
             } else {
               return '';
             }
@@ -78,18 +79,18 @@ angular.module('ui.bootstrap.datetimepicker', ["ui.bootstrap.dateparser", "ui.bo
           function createFuncAttr(innerAttr, funcArgs, dateTimeAttrOpt, defaultImpl) {
             var dateTimeAttr = angular.isDefined(dateTimeAttrOpt) ? dateTimeAttrOpt : innerAttr;
             if (attrs[dateTimeAttr]) {
-              return dashCase(innerAttr) + "=\"" + dateTimeAttr + "({" + funcArgs + "})\" ";
+              return `${dashCase(innerAttr)}="${dateTimeAttr}({${funcArgs}})" `;
             } else {
-              return angular.isDefined(defaultImpl) ? dashCase(innerAttr) + "=\"" + defaultImpl + "\"" : "";
+              return angular.isDefined(defaultImpl) ? `${dashCase(innerAttr)}="${defaultImpl}" ` : "";
             }
           }
 
           function createEvalAttr(innerAttr, dateTimeAttrOpt) {
             var dateTimeAttr = angular.isDefined(dateTimeAttrOpt) ? dateTimeAttrOpt : innerAttr;
             if (attrs[dateTimeAttr]) {
-              return dashCase(innerAttr) + "=\"" + attrs[dateTimeAttr] + "\" ";
+              return `${dashCase(innerAttr)}="${attrs[dateTimeAttr]}" `;
             } else {
-              return dashCase(innerAttr) + " ";
+              return `${dashCase(innerAttr)} `;
             }
           }
 
@@ -98,8 +99,11 @@ angular.module('ui.bootstrap.datetimepicker', ["ui.bootstrap.dateparser", "ui.bo
           }
 
           var dateTmpl = "<div class=\"datetimepicker-wrapper\">" +
-            "<input class=\"form-control\" type=\"text\" " +
+            "<input class=\"form-control\" " +
+            "type=\"text\" " +
             "name=\"datepicker\"" +
+            "autocomplete=\"off\"" +
+            'aria-label="' + (attrs.name || attrs.ngModel).replace(/[\.,-]/g, ' ') + '"' +
             "ng-change=\"date_change($event)\" " +
             "is-open=\"innerDateOpened\" " +
             "datepicker-options=\"dateOptions\" " +
@@ -114,9 +118,9 @@ angular.module('ui.bootstrap.datetimepicker', ["ui.bootstrap.dateparser", "ui.bo
               ["yearRange"],
               ["required"],
               ["showButtonBar"],
-              ["ngHide", "hiddenDate"],
-              ["ngReadonly", "readonlyDate"],
-              ["ngDisabled", "disabledDate"]
+              ["ngHide", "hiddendate"],
+              ["ngReadonly", "readonlydate"],
+              ["ngDisabled", "disableddate"]
             ].reduce(createAttrConcat, '') +
             createFuncAttr("ngClick",
               "$event: $event, opened: opened",
@@ -143,8 +147,8 @@ angular.module('ui.bootstrap.datetimepicker', ["ui.bootstrap.dateparser", "ui.bo
               ["required"],
               ["meredians"],
               ["mousewheel"],
-              ["ngHide", "hiddenTime"],
-              ["ngDisabled", "readonlyTime"]
+              ["ngHide", "hiddentime"],
+              ["ngDisabled", "readonlytime"]
             ].reduce(createAttrConcat, '') +
             createEvalAttr("showSpinners", "showSpinners") +
             createEvalAttr("templateUrl", "timepickerTemplateUrl") +
@@ -156,10 +160,10 @@ angular.module('ui.bootstrap.datetimepicker', ["ui.bootstrap.dateparser", "ui.bo
         },
         controller: ['$scope', '$attrs',
           function ($scope, $attrs) {
-            let form;
+            var form;
             function getForm() {
               if (!form) {
-                let workingScope = $scope;
+                var workingScope = $scope;
                 while (typeof workingScope.topLevelFormName !== "string" && workingScope.$parent) {
                   workingScope = workingScope.$parent;
                 }
@@ -167,6 +171,24 @@ angular.module('ui.bootstrap.datetimepicker', ["ui.bootstrap.dateparser", "ui.bo
               }
             }
             getForm();
+            // ****************************************************
+            // HACK RIGHT HERE!
+            // For cases where formsAngular.elemSecurityFuncBinding is set to either "one-time" or "normal", the
+            // result of the call to handleReadOnlyDisabled() made by the fngUiBootstrapDatetimePicker directive might
+            // include reference(s) to two functions which our ancestor form scope should have been decorated with -
+            // isSecurelyDisabled and requiresDisabledChildren.  Because our scope is isolated, these will be
+            // inaccessible to us unless we do the following...:
+            if (formsAngular.disabledSecurityFuncName) {
+              $scope.isSecurelyDisabled = $scope.$parent.isSecurelyDisabled;
+              $scope.requiresDisabledChildren = $scope.$parent.requiresDisabledChildren;
+            }   
+            // as this is only going to work for disabled state arising from fng security, and not the case
+            // where an fng field has a string-valued readonly attribute that refers to a function on the parent 
+            // scope, it's only a partial solution.  the general solution would presumably be to replace our isolated
+            // scope definition with "scope:true", thus giving it full ancestor access.  however, I gave
+            // that a quick try and found that it broke things, and it doesn't seem worth spending any more time
+            // on that right now.
+            // ****************************************************
             $scope.date_change = function () {
               // If we changed the date only, set the time (h,m) on it.
               // This is important in case the previous date was null.
@@ -177,13 +199,19 @@ angular.module('ui.bootstrap.datetimepicker', ["ui.bootstrap.dateparser", "ui.bo
                 $scope.ngModel.setHours(time.getHours(), time.getMinutes(), 0, 0);
                 $scope.ngModel = new Date($scope.ngModel); // By default, ngModel watches the model by reference, not value. This is important to know when binding inputs to models that are objects (e.g. Date) (from: https://docs.angularjs.org/api/ng/directive/ngModel)
               }
-              form.$setDirty();
+              getForm();
+              if (form) {
+                form.$setDirty();
+              }
             };
             $scope.time_change = function () {
               if ($scope.ngModel && $scope.time) {
                 $scope.ngModel.setHours($scope.time.getHours(), $scope.time.getMinutes(), 0, 0);
                 $scope.ngModel = new Date($scope.ngModel); // By default, ngModel watches the model by reference, not value. This is important to know when binding inputs to models that are objects (e.g. Date) (from: https://docs.angularjs.org/api/ng/directive/ngModel)
-                form.$setDirty();
+                getForm();
+                if (form) {
+                  form.$setDirty();
+                }
               }  // else the time is invalid, keep the current Date value in datepicker
             };
             $scope.open = function ($event) {
@@ -362,8 +390,8 @@ angular.module('ui.bootstrap.datetimepicker', ["ui.bootstrap.dateparser", "ui.bo
   uiBootstrapDateModule.controller('fngUiBootstrapDatetimePickerCtrl',['$scope', function($scope) {
       $scope.dateOptions = {};
     }])
-    .directive('fngUiBootstrapDatetimePicker', ['$compile', '$filter', 'pluginHelper', 'formMarkupHelper', 'cssFrameworkService',
-    function ($compile, $filter, pluginHelper) {
+    .directive('fngUiBootstrapDatetimePicker', ['$compile', 'PluginHelperService',
+    function ($compile, PluginHelperService) {
       return {
         restrict: 'E',
         replace: true,
@@ -371,8 +399,8 @@ angular.module('ui.bootstrap.datetimepicker', ["ui.bootstrap.dateparser", "ui.bo
         priority: 1,
         link: function (scope, element, attrs) {
           var template;
-          var processedAttr = pluginHelper.extractFromAttr(attrs, 'fngUiBootstrapDatetimePicker');
-          var overRiddenDefaults = {
+          var processedAttrs = PluginHelperService.extractFromAttr(attrs, 'fngUiBootstrapDatetimePicker', scope);
+          var overriddenDefaults = {
             'show-button-bar': false,
             'show-meridian': false,
             'date-format': 'dd/MM/yyyy'
@@ -381,35 +409,62 @@ angular.module('ui.bootstrap.datetimepicker', ["ui.bootstrap.dateparser", "ui.bo
           // Set form to dirty when required.  Works OK with existing records - hopefully new records will have other field types
           var watchField = attrs.model + '.' + attrs.fngFldName;
           var formName = attrs.fngOptName;
+          // The model value is normally a string or a Date, but can be something else (e.g. a number, or an invalid Date
+          // whose toISOString() throws), so compare on a representation that can always be produced
+          function comparable(val) {
+            if (typeof val === 'string') {
+              return val;
+            }
+            if (typeof val.toISOString === 'function') {
+              try {
+                return val.toISOString();
+              } catch (e) {
+                // Invalid Date - fall through
+              }
+            }
+            return String(val);
+          }
           scope.$watch(watchField, function (newVal, oldVal) {
             if (scope[formName] && newVal && oldVal && newVal !== oldVal) {
-              var newComp = (typeof newVal === 'string') ? newVal : newVal.toISOString();
-              var oldComp = (typeof oldVal === 'string') ? oldVal : oldVal.toISOString();
+              var newComp = comparable(newVal);
+              var oldComp = comparable(oldVal);
               if (newComp !== oldComp) {
                 scope[formName].$setDirty();
               }
             }
           });
 
-          overRiddenDefaults = Object.assign({}, overRiddenDefaults, processedAttr.directiveOptions);
-          var overRiddenDateDefaults = {
+          overriddenDefaults = Object.assign({}, overriddenDefaults, processedAttrs.directiveOptions);
+          var overriddenDateDefaults = {
             showWeeks: false
           };
           var jsonDateOptions = {};
-          if (processedAttr.directiveOptions['date-options']) {
-            jsonDateOptions = JSON.parse(processedAttr.directiveOptions['date-options'].replace(/'/g, '"'));
+          if (processedAttrs.directiveOptions['date-options']) {
+            jsonDateOptions = JSON.parse(processedAttrs.directiveOptions['date-options'].replace(/'/g, '"'));
           }
-          scope.dateOptions = Object.assign({}, overRiddenDateDefaults, jsonDateOptions);
-          template = pluginHelper.buildInputMarkup(scope, attrs.model, processedAttr.info, processedAttr.options, false, false, function (buildingBlocks) {
-            var str = '<div class="dtwrap"><datetimepicker ' + buildingBlocks.common;
-            for (var opt in overRiddenDefaults) {
-              if (opt !== 'date-options') {
-                str += ' ' + opt + '="' + overRiddenDefaults[opt] + '"';
+          scope.dateOptions = Object.assign({}, overriddenDateDefaults, jsonDateOptions);
+          
+          const isArray = processedAttrs.info.array;
+          template = PluginHelperService.buildInputMarkup(
+            scope,
+            attrs,
+            {
+              processedAttrs,
+              addButtons: isArray,
+              needsX: isArray,
+            },
+            function (buildingBlocks) {
+              var str = '<div class="dtwrap"><datetimepicker ' + buildingBlocks.common.trim();
+              for (var opt in overriddenDefaults) {
+                if (opt !== 'date-options') {
+                  str += ` ${opt}="${overriddenDefaults[opt]}"`;
+                }
               }
+              str += " " + PluginHelperService.genDateTimePickerDisabledStr(scope, processedAttrs, "");
+              str += ' date-options="dateOptions"></datetimepicker></div>';
+              return str;
             }
-            str += ' date-options="dateOptions"></datetimepicker></div>';
-            return str;
-          });
+          );
           element.replaceWith($compile(template)(scope));
         }
       };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fng-bootstrap-datetime",
-  "version": "0.12.0-beta.36",
+  "version": "0.12.0-beta.360",
   "description": "datetime input plugin for forms-angular",
   "main": "fng-bootstrap-datetime.js",
   "scripts": {