Skip to content

Commit 5892cca

Browse files
jeff-phillips-18jeff-phillips-18
committed
Merge pull request #26 from erundle/master
Adding datepicker directive to wrap pf jquery based bootstrap datepicker
2 parents 7ce9c16 + 2320fca commit 5892cca

File tree

7 files changed

+202
-1
lines changed

7 files changed

+202
-1
lines changed

‎Gruntfile.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ module.exports = function(grunt) {
9999
scripts: ['lib/patternfly/components/jquery/dist/jquery.js',
100100
'lib/patternfly/components/bootstrap/dist/js/bootstrap.js',
101101
'lib/patternfly/components/bootstrap-combobox/js/bootstrap-combobox.js',
102+
'lib/patternfly/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js',
102103
'lib/patternfly/components/bootstrap-select/js/bootstrap-select.js',
103104
'lib/patternfly/components/bootstrap-treeview/src/js/bootstrap-treeview.js',
104105
'lib/patternfly/components/c3/c3.js',

‎dist/angular-patternfly.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,79 @@ angular.module('patternfly.autofocus', []).directive('pfFocused', function($time
7676
}
7777
};
7878
});
79+
;/**
80+
* @ngdoc directive
81+
* @name patternfly.form.directive:pfDatepicker
82+
*
83+
* @description
84+
* Angular directive to wrap the bootstrap datepicker http://bootstrap-datepicker.readthedocs.org/en/latest/
85+
*
86+
* @param {string} date the date model
87+
* @param {string} options the configuration options for the date picker
88+
*
89+
* @example
90+
<example module="patternfly.form">
91+
92+
<file name="index.html">
93+
<form class="form-horizontal" ng-controller="FormDemoCtrl">
94+
<div>
95+
<button ng-click=setToday()>Set Today in Angular Model</button>
96+
</div>
97+
Date: <span ng-bind="date | date:'MM/dd/yyyy'"></span>
98+
<div pf-datepicker options="options" date="date"></div>
99+
</form>
100+
</file>
101+
102+
<file name="script.js">
103+
function FormDemoCtrl ($scope) {
104+
$scope.setToday = function () {
105+
$scope.date = new Date();
106+
}
107+
108+
$scope.options = {
109+
autoclose: true,
110+
todayBtn: 'linked',
111+
todayHighlight: true
112+
};
113+
}
114+
</file>
115+
</example>
116+
*/
117+
angular.module('patternfly.form').directive('pfDatepicker', function() {
118+
'use strict';
119+
return {
120+
replace: true,
121+
restrict: 'A',
122+
require: '^form',
123+
templateUrl: 'form/datepicker/datepicker.html',
124+
scope: {
125+
options: '=',
126+
date: '='
127+
},
128+
link: function($scope, element) {
129+
130+
//Make sure the date picker is set with the correct options
131+
element.datepicker($scope.options);
132+
133+
//Set the initial value of the date picker
134+
element.datepicker('update', $scope.date);
135+
136+
//Change happened on the date picker side. Update the underlying date model
137+
element.datepicker($scope.date).on('changeDate', function(elem) {
138+
$scope.$apply(function(){
139+
$scope.date = elem.date;
140+
});
141+
});
142+
143+
//Update the date picker if there is a change on the date model
144+
$scope.$watch('date', function(newValue, oldValue) {
145+
if (oldValue !== newValue) {
146+
element.datepicker('update', newValue);
147+
}
148+
});
149+
}
150+
};
151+
});
79152
;'use strict';
80153
/**
81154
* @ngdoc directive
@@ -864,6 +937,11 @@ angular.module('patternfly.validation', []).directive('pfValidation', function($
864937
});;angular.module('patternfly.form').run(['$templateCache', function($templateCache) {
865938
'use strict';
866939

940+
$templateCache.put('form/datepicker/datepicker.html',
941+
"<div class=\"input-group date\"><input class=\"form-control\"> <span class=input-group-addon><span class=\"fa fa-calendar\"></span></span></div>"
942+
);
943+
944+
867945
$templateCache.put('form/form-buttons/form-buttons.html',
868946
"<div class=form-group><div class=\"{{ pfButtonContainerClass }}\"><div class=\"control-group buttons\"><button class=\"btn btn-default\" type=button ng-click=pfHandleCancel() ng-disabled=pfWorking translate>Cancel</button> <button class=\"btn btn-primary\" ng-click=\"pfHandleSave(); pfWorking = true\" ng-disabled=\"isInvalid() || pfWorking\"><i class=\"icon-spinner icon-spin\" ng-show=pfWorking></i> <span ng-show=pfWorking translate>Saving...</span> <span ng-hide=pfWorking translate>Save</span></button></div></div></div>"
869947
);

‎dist/angular-patternfly.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/form/datepicker/datepicker.directive.js‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
/**
2+
* @ngdoc directive
3+
* @name patternfly.form.directive:pfDatepicker
4+
*
5+
* @description
6+
* Angular directive to wrap the bootstrap datepicker http://bootstrap-datepicker.readthedocs.org/en/latest/
7+
*
8+
* @param {string} date the date model
9+
* @param {string} options the configuration options for the date picker
10+
*
11+
* @example
12+
<example module="patternfly.form">
13+
14+
<file name="index.html">
15+
<form class="form-horizontal" ng-controller="FormDemoCtrl">
16+
<div>
17+
<button ng-click=setToday()>Set Today in Angular Model</button>
18+
</div>
19+
Date: <span ng-bind="date | date:'MM/dd/yyyy'"></span>
20+
<div pf-datepicker options="options" date="date"></div>
21+
</form>
22+
</file>
23+
24+
<file name="script.js">
25+
function FormDemoCtrl ($scope) {
26+
$scope.setToday = function () {
27+
$scope.date = new Date();
28+
}
29+
30+
$scope.options = {
31+
autoclose: true,
32+
todayBtn: 'linked',
33+
todayHighlight: true
34+
};
35+
}
36+
</file>
37+
</example>
38+
*/
39+
angular.module('patternfly.form').directive('pfDatepicker', function() {
40+
'use strict';
41+
return {
42+
replace: true,
43+
restrict: 'A',
44+
require: '^form',
45+
templateUrl: 'form/datepicker/datepicker.html',
46+
scope: {
47+
options: '=',
48+
date: '='
49+
},
50+
link: function($scope, element) {
51+
52+
//Make sure the date picker is set with the correct options
53+
element.datepicker($scope.options);
54+
55+
//Set the initial value of the date picker
56+
element.datepicker('update', $scope.date);
57+
58+
//Change happened on the date picker side. Update the underlying date model
59+
element.datepicker($scope.date).on('changeDate', function(elem) {
60+
$scope.$apply(function(){
61+
$scope.date = elem.date;
62+
});
63+
});
64+
65+
//Update the date picker if there is a change on the date model
66+
$scope.$watch('date', function(newValue, oldValue) {
67+
if (oldValue !== newValue) {
68+
element.datepicker('update', newValue);
69+
}
70+
});
71+
}
72+
};
73+
});

‎src/form/datepicker/datepicker.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<div class="input-group date">
2+
<input type="text" class="form-control"/>
3+
<span class="input-group-addon">
4+
<span class="fa fa-calendar"></span>
5+
</span>
6+
</div>

‎test/form/datepicker/datepicker.directive.spec.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
describe('Directive: pfDatepicker', function() {
2+
var $scope, $compile, $timeout, element, datepicker, dateInput;
3+
4+
beforeEach(module('patternfly.form', 'form/datepicker/datepicker.html'));
5+
6+
beforeEach(inject(function(_$compile_, _$rootScope_) {
7+
$compile = _$compile_;
8+
$scope = _$rootScope_;
9+
}));
10+
11+
var compileDatepicker = function(markup, $scope) {
12+
var el = $compile(markup)($scope);
13+
$scope.$apply();
14+
return el;
15+
};
16+
17+
it("should set the date picker input", function() {
18+
$scope.options = {};
19+
20+
datepicker = compileDatepicker('<form><div pf-datepicker options="options" date="date"></div></form>', $scope);
21+
dateInput = angular.element(datepicker).find('input');
22+
expect(dateInput.val()).toBe('');
23+
24+
$scope.date = new Date("October 13, 2014 11:13:00");
25+
$scope.$digest();
26+
27+
expect(dateInput.val()).toBe('10/13/2014');
28+
});
29+
30+
it("should set the angular model", function() {
31+
$scope.options = {};
32+
33+
datepicker = compileDatepicker('<form><div pf-datepicker options="options" date="date"></div></form>', $scope);
34+
dateInput = angular.element(datepicker).find('input');
35+
dateInput.datepicker('update', new Date("October 4, 2015 11:13:00"));
36+
37+
$scope.$digest();
38+
39+
expect(dateInput.val()).toBe('10/04/2015');
40+
});
41+
42+
});

‎test/karma.conf.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ module.exports = function(config) {
99
// list of files / patterns to load in the browser
1010
files: [
1111
'lib/patternfly/components/jquery/dist/jquery.js',
12+
'lib/patternfly/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js',
1213
'lib/patternfly/components/bootstrap-select/js/bootstrap-select.js',
1314
'lib/angular/angular.js',
1415
'lib/angular-mocks/angular-mocks.js',

0 commit comments

Comments
 (0)