feat(datepicker): preserve popup attributes

- Preserve usage of specific popup attributes - Change from attributes to options in demo Closes #5537
angular-ui · Feb 24, 2016 · bbc4912 · bbc4912
1 parent d880aea
commit bbc4912
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 333 deletions.
diff --git a/src/datepicker/datepicker.js b/src/datepicker/datepicker.js
@@ -771,50 +771,26 @@ function($scope, $element, $attrs, $compile, $log, $parse, $window, $document, $
   this.init = function(_ngModel_) {
     ngModel = _ngModel_;
     ngModelOptions = _ngModel_.$options || datepickerConfig.ngModelOptions;
-    if (angular.isDefined($scope.datepickerOptions)) {
-      closeOnDateSelection = angular.isDefined($scope.datepickerOptions.closeOnDateSelection) ?
-        $scope.datepickerOptions.closeOnDateSelection :
-        datepickerPopupConfig.closeOnDateSelection;
-      appendToBody = angular.isDefined($scope.datepickerOptions.datepickerAppendToBody) ?
-        $scope.datepickerOptions.datepickerAppendToBody :
-        datepickerPopupConfig.datepickerAppendToBody;
-      onOpenFocus = angular.isDefined($scope.datepickerOptions.onOpenFocus) ?
-        $scope.datepickerOptions.onOpenFocus :
-        datepickerPopupConfig.onOpenFocus;
-      datepickerPopupTemplateUrl = angular.isDefined($scope.datepickerOptions.datepickerPopupTemplateUrl) ?
-        $scope.datepickerOptions.datepickerPopupTemplateUrl :
-        datepickerPopupConfig.datepickerPopupTemplateUrl;
-      datepickerTemplateUrl = angular.isDefined($scope.datepickerOptions.datepickerTemplateUrl) ?
-        $scope.datepickerOptions.datepickerTemplateUrl : datepickerPopupConfig.datepickerTemplateUrl;
-      altInputFormats = angular.isDefined($scope.datepickerOptions.altInputFormats) ?
-        $scope.datepickerOptions.altInputFormats :
-        datepickerPopupConfig.altInputFormats;
-    } else {
-      if (datepickerPopupAttributeWarning) {
-        $log.warn('uib-datepicker-popup attributes are deprecated and will be removed in UI Bootstrap 1.3, use datepicker-options attribute instead');
-      }
-
-      closeOnDateSelection = angular.isDefined($attrs.closeOnDateSelection) ?
-        $scope.$parent.$eval($attrs.closeOnDateSelection) :
-        datepickerPopupConfig.closeOnDateSelection;
-      appendToBody = angular.isDefined($attrs.datepickerAppendToBody) ?
-        $scope.$parent.$eval($attrs.datepickerAppendToBody) :
-        datepickerPopupConfig.appendToBody;
-      onOpenFocus = angular.isDefined($attrs.onOpenFocus) ?
-        $scope.$parent.$eval($attrs.onOpenFocus) : datepickerPopupConfig.onOpenFocus;
-      datepickerPopupTemplateUrl = angular.isDefined($attrs.datepickerPopupTemplateUrl) ?
-        $attrs.datepickerPopupTemplateUrl :
-        datepickerPopupConfig.datepickerPopupTemplateUrl;
-      datepickerTemplateUrl = angular.isDefined($attrs.datepickerTemplateUrl) ?
-        $attrs.datepickerTemplateUrl : datepickerPopupConfig.datepickerTemplateUrl;
-      altInputFormats = angular.isDefined($attrs.altInputFormats) ?
-        $scope.$parent.$eval($attrs.altInputFormats) :
-        datepickerPopupConfig.altInputFormats;
-
-      $scope.showButtonBar = angular.isDefined($attrs.showButtonBar) ?
-        $scope.$parent.$eval($attrs.showButtonBar) :
-        datepickerPopupConfig.showButtonBar;
-    }
+    closeOnDateSelection = angular.isDefined($attrs.closeOnDateSelection) ?
+      $scope.$parent.$eval($attrs.closeOnDateSelection) :
+      datepickerPopupConfig.closeOnDateSelection;
+    appendToBody = angular.isDefined($attrs.datepickerAppendToBody) ?
+      $scope.$parent.$eval($attrs.datepickerAppendToBody) :
+      datepickerPopupConfig.appendToBody;
+    onOpenFocus = angular.isDefined($attrs.onOpenFocus) ?
+      $scope.$parent.$eval($attrs.onOpenFocus) : datepickerPopupConfig.onOpenFocus;
+    datepickerPopupTemplateUrl = angular.isDefined($attrs.datepickerPopupTemplateUrl) ?
+      $attrs.datepickerPopupTemplateUrl :
+      datepickerPopupConfig.datepickerPopupTemplateUrl;
+    datepickerTemplateUrl = angular.isDefined($attrs.datepickerTemplateUrl) ?
+      $attrs.datepickerTemplateUrl : datepickerPopupConfig.datepickerTemplateUrl;
+    altInputFormats = angular.isDefined($attrs.altInputFormats) ?
+      $scope.$parent.$eval($attrs.altInputFormats) :
+      datepickerPopupConfig.altInputFormats;
+
+    $scope.showButtonBar = angular.isDefined($attrs.showButtonBar) ?
+      $scope.$parent.$eval($attrs.showButtonBar) :
+      datepickerPopupConfig.showButtonBar;
 
     if (datepickerPopupConfig.html5Types[$attrs.type]) {
       dateFormat = datepickerPopupConfig.html5Types[$attrs.type];

diff --git a/src/datepicker/docs/demo.html b/src/datepicker/docs/demo.html
@@ -15,33 +15,33 @@
 
     <h4>Inline</h4>
     <div style="display:inline-block; min-height:290px;">
-      <uib-datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm" custom-class="getDayClass(date, mode)"></uib-datepicker>
+      <uib-datepicker ng-model="dt" class="well well-sm" datepicker-options="inlineOptions"></uib-datepicker>
     </div>
 
     <h4>Popup</h4>
     <div class="row">
-        <div class="col-md-6">
-            <p class="input-group">
-              <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
-              <span class="input-group-btn">
-                <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
-              </span>
-            </p>
-        </div>
+      <div class="col-md-6">
+        <p class="input-group">
+          <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
+          <span class="input-group-btn">
+            <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
+          </span>
+        </p>
+      </div>
 
-        <div class="col-md-6">
-            <p class="input-group">
-              <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" min-date="minDate" max-date="maxDate" 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="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
-              </span>
-            </p>
-        </div>
+      <div class="col-md-6">
+        <p class="input-group">
+          <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
+          <span class="input-group-btn">
+            <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
+          </span>
+        </p>
+      </div>
     </div>
     <div class="row">
-        <div class="col-md-6">
-            <label>Format: <span class="muted-text">(manual alternate <em>{{altInputFormats[0]}}</em>)</span></label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select>
-        </div>
+      <div class="col-md-6">
+        <label>Format: <span class="muted-text">(manual alternate <em>{{altInputFormats[0]}}</em>)</span></label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select>
+      </div>
     </div>
 
     <hr />

diff --git a/src/datepicker/docs/demo.js b/src/datepicker/docs/demo.js
@@ -8,17 +8,33 @@ angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($
     $scope.dt = null;
   };
 
+  $scope.inlineOptions = {
+    customClass: getDayClass,
+    minDate: new Date(),
+    showWeeks: true
+  };
+
+  $scope.dateOptions = {
+    dateDisabled: disabled,
+    formatYear: 'yy',
+    maxDate: new Date(2020, 5, 22),
+    minDate: new Date(),
+    startingDay: 1
+  };
+
   // Disable weekend selection
-  $scope.disabled = function(date, mode) {
+  function disabled(data) {
+    var date = data.date,
+      mode = data.mode;
     return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
-  };
+  }
 
   $scope.toggleMin = function() {
-    $scope.minDate = $scope.minDate ? null : new Date();
+    $scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
+    $scope.dateOptions.minDate = $scope.inlineOptions.minDate;
   };
 
   $scope.toggleMin();
-  $scope.maxDate = new Date(2020, 5, 22);
 
   $scope.open1 = function() {
     $scope.popup1.opened = true;
@@ -32,11 +48,6 @@ angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($
     $scope.dt = new Date(year, month, day);
   };
 
-  $scope.dateOptions = {
-    formatYear: 'yy',
-    startingDay: 1
-  };
-
   $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
   $scope.format = $scope.formats[0];
   $scope.altInputFormats = ['M!/d!/yyyy'];
@@ -53,19 +64,20 @@ angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($
   tomorrow.setDate(tomorrow.getDate() + 1);
   var afterTomorrow = new Date();
   afterTomorrow.setDate(tomorrow.getDate() + 1);
-  $scope.events =
-    [
-      {
-        date: tomorrow,
-        status: 'full'
-      },
-      {
-        date: afterTomorrow,
-        status: 'partially'
-      }
-    ];
+  $scope.events = [
+    {
+      date: tomorrow,
+      status: 'full'
+    },
+    {
+      date: afterTomorrow,
+      status: 'partially'
+    }
+  ];
 
-  $scope.getDayClass = function(date, mode) {
+  function getDayClass(data) {
+    var date = data.date,
+      mode = data.mode;
     if (mode === 'day') {
       var dayToCheck = new Date(date).setHours(0,0,0,0);
 
@@ -79,5 +91,5 @@ angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($
     }
 
     return '';
-  };
+  }
 });