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

Commit bbc4912

Browse files
wesleychowesleycho
committed
feat(datepicker): preserve popup attributes
- Preserve usage of specific popup attributes - Change from attributes to options in demo Closes #5537
1 parent d880aea commit bbc4912

File tree

4 files changed

+74
-333
lines changed

4 files changed

+74
-333
lines changed

‎src/datepicker/datepicker.js

+20-44
Original file line numberDiff line numberDiff line change
@@ -771,50 +771,26 @@ function($scope, $element, $attrs, $compile, $log, $parse, $window, $document, $
771771
this.init = function(_ngModel_) {
772772
ngModel = _ngModel_;
773773
ngModelOptions = _ngModel_.$options || datepickerConfig.ngModelOptions;
774-
if (angular.isDefined($scope.datepickerOptions)) {
775-
closeOnDateSelection = angular.isDefined($scope.datepickerOptions.closeOnDateSelection) ?
776-
$scope.datepickerOptions.closeOnDateSelection :
777-
datepickerPopupConfig.closeOnDateSelection;
778-
appendToBody = angular.isDefined($scope.datepickerOptions.datepickerAppendToBody) ?
779-
$scope.datepickerOptions.datepickerAppendToBody :
780-
datepickerPopupConfig.datepickerAppendToBody;
781-
onOpenFocus = angular.isDefined($scope.datepickerOptions.onOpenFocus) ?
782-
$scope.datepickerOptions.onOpenFocus :
783-
datepickerPopupConfig.onOpenFocus;
784-
datepickerPopupTemplateUrl = angular.isDefined($scope.datepickerOptions.datepickerPopupTemplateUrl) ?
785-
$scope.datepickerOptions.datepickerPopupTemplateUrl :
786-
datepickerPopupConfig.datepickerPopupTemplateUrl;
787-
datepickerTemplateUrl = angular.isDefined($scope.datepickerOptions.datepickerTemplateUrl) ?
788-
$scope.datepickerOptions.datepickerTemplateUrl : datepickerPopupConfig.datepickerTemplateUrl;
789-
altInputFormats = angular.isDefined($scope.datepickerOptions.altInputFormats) ?
790-
$scope.datepickerOptions.altInputFormats :
791-
datepickerPopupConfig.altInputFormats;
792-
} else {
793-
if (datepickerPopupAttributeWarning) {
794-
$log.warn('uib-datepicker-popup attributes are deprecated and will be removed in UI Bootstrap 1.3, use datepicker-options attribute instead');
795-
}
796-
797-
closeOnDateSelection = angular.isDefined($attrs.closeOnDateSelection) ?
798-
$scope.$parent.$eval($attrs.closeOnDateSelection) :
799-
datepickerPopupConfig.closeOnDateSelection;
800-
appendToBody = angular.isDefined($attrs.datepickerAppendToBody) ?
801-
$scope.$parent.$eval($attrs.datepickerAppendToBody) :
802-
datepickerPopupConfig.appendToBody;
803-
onOpenFocus = angular.isDefined($attrs.onOpenFocus) ?
804-
$scope.$parent.$eval($attrs.onOpenFocus) : datepickerPopupConfig.onOpenFocus;
805-
datepickerPopupTemplateUrl = angular.isDefined($attrs.datepickerPopupTemplateUrl) ?
806-
$attrs.datepickerPopupTemplateUrl :
807-
datepickerPopupConfig.datepickerPopupTemplateUrl;
808-
datepickerTemplateUrl = angular.isDefined($attrs.datepickerTemplateUrl) ?
809-
$attrs.datepickerTemplateUrl : datepickerPopupConfig.datepickerTemplateUrl;
810-
altInputFormats = angular.isDefined($attrs.altInputFormats) ?
811-
$scope.$parent.$eval($attrs.altInputFormats) :
812-
datepickerPopupConfig.altInputFormats;
813-
814-
$scope.showButtonBar = angular.isDefined($attrs.showButtonBar) ?
815-
$scope.$parent.$eval($attrs.showButtonBar) :
816-
datepickerPopupConfig.showButtonBar;
817-
}
774+
closeOnDateSelection = angular.isDefined($attrs.closeOnDateSelection) ?
775+
$scope.$parent.$eval($attrs.closeOnDateSelection) :
776+
datepickerPopupConfig.closeOnDateSelection;
777+
appendToBody = angular.isDefined($attrs.datepickerAppendToBody) ?
778+
$scope.$parent.$eval($attrs.datepickerAppendToBody) :
779+
datepickerPopupConfig.appendToBody;
780+
onOpenFocus = angular.isDefined($attrs.onOpenFocus) ?
781+
$scope.$parent.$eval($attrs.onOpenFocus) : datepickerPopupConfig.onOpenFocus;
782+
datepickerPopupTemplateUrl = angular.isDefined($attrs.datepickerPopupTemplateUrl) ?
783+
$attrs.datepickerPopupTemplateUrl :
784+
datepickerPopupConfig.datepickerPopupTemplateUrl;
785+
datepickerTemplateUrl = angular.isDefined($attrs.datepickerTemplateUrl) ?
786+
$attrs.datepickerTemplateUrl : datepickerPopupConfig.datepickerTemplateUrl;
787+
altInputFormats = angular.isDefined($attrs.altInputFormats) ?
788+
$scope.$parent.$eval($attrs.altInputFormats) :
789+
datepickerPopupConfig.altInputFormats;
790+
791+
$scope.showButtonBar = angular.isDefined($attrs.showButtonBar) ?
792+
$scope.$parent.$eval($attrs.showButtonBar) :
793+
datepickerPopupConfig.showButtonBar;
818794

819795
if (datepickerPopupConfig.html5Types[$attrs.type]) {
820796
dateFormat = datepickerPopupConfig.html5Types[$attrs.type];

‎src/datepicker/docs/demo.html

+20-20
Original file line numberDiff line numberDiff line change
@@ -15,33 +15,33 @@
1515

1616
<h4>Inline</h4>
1717
<div style="display:inline-block; min-height:290px;">
18-
<uib-datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm" custom-class="getDayClass(date, mode)"></uib-datepicker>
18+
<uib-datepicker ng-model="dt" class="well well-sm" datepicker-options="inlineOptions"></uib-datepicker>
1919
</div>
2020

2121
<h4>Popup</h4>
2222
<div class="row">
23-
<div class="col-md-6">
24-
<p class="input-group">
25-
<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" />
26-
<span class="input-group-btn">
27-
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
28-
</span>
29-
</p>
30-
</div>
23+
<div class="col-md-6">
24+
<p class="input-group">
25+
<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" />
26+
<span class="input-group-btn">
27+
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
28+
</span>
29+
</p>
30+
</div>
3131

32-
<div class="col-md-6">
33-
<p class="input-group">
34-
<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" />
35-
<span class="input-group-btn">
36-
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
37-
</span>
38-
</p>
39-
</div>
32+
<div class="col-md-6">
33+
<p class="input-group">
34+
<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" />
35+
<span class="input-group-btn">
36+
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
37+
</span>
38+
</p>
39+
</div>
4040
</div>
4141
<div class="row">
42-
<div class="col-md-6">
43-
<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>
44-
</div>
42+
<div class="col-md-6">
43+
<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>
44+
</div>
4545
</div>
4646

4747
<hr />

‎src/datepicker/docs/demo.js

+34-22
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,33 @@ angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($
88
$scope.dt = null;
99
};
1010

11+
$scope.inlineOptions = {
12+
customClass: getDayClass,
13+
minDate: new Date(),
14+
showWeeks: true
15+
};
16+
17+
$scope.dateOptions = {
18+
dateDisabled: disabled,
19+
formatYear: 'yy',
20+
maxDate: new Date(2020, 5, 22),
21+
minDate: new Date(),
22+
startingDay: 1
23+
};
24+
1125
// Disable weekend selection
12-
$scope.disabled = function(date, mode) {
26+
function disabled(data) {
27+
var date = data.date,
28+
mode = data.mode;
1329
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
14-
};
30+
}
1531

1632
$scope.toggleMin = function() {
17-
$scope.minDate = $scope.minDate ? null : new Date();
33+
$scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
34+
$scope.dateOptions.minDate = $scope.inlineOptions.minDate;
1835
};
1936

2037
$scope.toggleMin();
21-
$scope.maxDate = new Date(2020, 5, 22);
2238

2339
$scope.open1 = function() {
2440
$scope.popup1.opened = true;
@@ -32,11 +48,6 @@ angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($
3248
$scope.dt = new Date(year, month, day);
3349
};
3450

35-
$scope.dateOptions = {
36-
formatYear: 'yy',
37-
startingDay: 1
38-
};
39-
4051
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
4152
$scope.format = $scope.formats[0];
4253
$scope.altInputFormats = ['M!/d!/yyyy'];
@@ -53,19 +64,20 @@ angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($
5364
tomorrow.setDate(tomorrow.getDate() + 1);
5465
var afterTomorrow = new Date();
5566
afterTomorrow.setDate(tomorrow.getDate() + 1);
56-
$scope.events =
57-
[
58-
{
59-
date: tomorrow,
60-
status: 'full'
61-
},
62-
{
63-
date: afterTomorrow,
64-
status: 'partially'
65-
}
66-
];
67+
$scope.events = [
68+
{
69+
date: tomorrow,
70+
status: 'full'
71+
},
72+
{
73+
date: afterTomorrow,
74+
status: 'partially'
75+
}
76+
];
6777

68-
$scope.getDayClass = function(date, mode) {
78+
function getDayClass(data) {
79+
var date = data.date,
80+
mode = data.mode;
6981
if (mode === 'day') {
7082
var dayToCheck = new Date(date).setHours(0,0,0,0);
7183

@@ -79,5 +91,5 @@ angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($
7991
}
8092

8193
return '';
82-
};
94+
}
8395
});

0 commit comments

Comments
 (0)