Skip to content

Commit 3ad3395

Browse files
nicolethoennicolethoen
committed
feat(pfBootstrapDatePicker): Initial Implementation
1 parent c10f16d commit 3ad3395

File tree

10 files changed

+319
-0
lines changed

10 files changed

+319
-0
lines changed

‎Gruntfile.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -453,6 +453,11 @@ module.exports = function (grunt) {
453453
cwd: 'src/',
454454
src: ['pagination/**/*.html'],
455455
dest: 'templates/pagination.js'
456+
},
457+
'patternfly.datepicker' : {
458+
cwd: 'src/',
459+
src: ['datepicker/**/*.html'],
460+
dest: 'templates/datepicker.js'
456461
}
457462
},
458463
// ng-annotate tries to make the code safe for minification automatically

‎misc/ng-docs.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -375,4 +375,7 @@ ul.events > li > h3 {
375375
background-color: #cc0000;
376376
}
377377

378+
.type-hint-date {
379+
background:#582fc0;
380+
}
378381

‎src/datepicker/bootstrap-datepicker.component.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
angular.module('patternfly.datepicker').component('pfBootstrapDatepicker', {
2+
bindings: {
3+
date: '<',
4+
format: '@?',
5+
dateOptions: '<?',
6+
isOpen: '<?',
7+
popupPlacement: '@?'
8+
},
9+
templateUrl: 'datepicker/datepicker.html',
10+
controller: function () {
11+
'use strict';
12+
13+
var ctrl = this;
14+
15+
ctrl.defaultDateOptions = {
16+
showWeeks : false,
17+
formatDay : "d"
18+
};
19+
ctrl.defaultIsOpen = false;
20+
21+
ctrl.$onInit = function () {
22+
ctrl.format = "MM/dd/yyyy";
23+
ctrl.showButtonBar = true;
24+
ctrl.popupPlacement = "auto bottom-left";
25+
26+
if (angular.isUndefined(ctrl.dateOptions)) {
27+
ctrl.dateOptions = {};
28+
}
29+
_.defaults(ctrl.dateOptions, ctrl.defaultDateOptions);
30+
_.defaults(ctrl.isOpen, ctrl.defaultIsOpen);
31+
};
32+
33+
ctrl.$onChanges = function (changes) {
34+
_.defaults(ctrl.isOpen, ctrl.defaultIsOpen);
35+
};
36+
37+
}
38+
});

‎src/datepicker/datepicker.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<p class="input-group">
2+
<input type="text" class="form-control datepicker"
3+
ng-model="$ctrl.date"
4+
uib-datepicker-popup="{{$ctrl.format}}"
5+
datepicker-options="$ctrl.dateOptions"
6+
is-open="$ctrl.isOpen"
7+
ng-required="true"
8+
close-text="Close"
9+
show-button-bar="$ctrl.showButtonBar"
10+
popup-placement="{{$ctrl.popupPlacement}}"/>
11+
<span class="input-group-btn">
12+
<button type="button" class="btn btn-default datepicker" ng-click="$ctrl.isOpen = !$ctrl.isOpen"><i class="glyphicon glyphicon-calendar"></i></button>
13+
</span>
14+
</p>

‎src/datepicker/datepicker.less‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
.uib-datepicker-popup {
2+
padding: 4px;
3+
4+
*:focus {
5+
outline: none;
6+
}
7+
8+
button {
9+
background: @color-pf-white;
10+
border: none;
11+
box-shadow: none;
12+
}
13+
14+
th {
15+
height: 30px;
16+
}
17+
18+
.uib-title {
19+
font-size: 14px;
20+
font-weight: 500;
21+
padding: 5px;
22+
23+
strong {
24+
font-weight: normal;
25+
}
26+
}
27+
28+
.uib-left {
29+
height: 30px;
30+
31+
.glyphicon {
32+
display: none;
33+
}
34+
35+
&::before {
36+
content: "\00AB";
37+
}
38+
}
39+
40+
.uib-right {
41+
height: 30px;
42+
43+
.glyphicon {
44+
display: none;
45+
}
46+
47+
&::before {
48+
content: "\00BB";
49+
}
50+
}
51+
52+
.uib-day {
53+
54+
button.btn.btn-default {
55+
height: 30px;
56+
width: 30px;
57+
58+
&:hover {
59+
background: @color-pf-blue-50;
60+
}
61+
62+
&.active {
63+
background: @color-pf-blue-400;
64+
border-color: @color-pf-blue-600;
65+
color: @color-pf-white;
66+
box-shadow: none;
67+
padding: 0;
68+
69+
.text-info { // this is today's date
70+
color: @color-pf-white;
71+
}
72+
}
73+
74+
&:not(.active){
75+
.text-info { // this is today's date
76+
color: @color-pf-black-800;
77+
background: @color-pf-gold-200;
78+
height: 30px;
79+
width: 30px;
80+
padding: 7px;
81+
display: inline-block;
82+
margin: -1px -7px -2px -7px;
83+
84+
&:hover {
85+
background: @color-pf-blue-50;
86+
}
87+
}
88+
}
89+
}
90+
91+
}
92+
93+
.uib-button-bar {
94+
padding: 0;
95+
96+
.btn-group {
97+
width: 100%;
98+
99+
.uib-clear {
100+
display: none;
101+
}
102+
103+
.uib-datepicker-current {
104+
color: @color-pf-black;
105+
width: 100%;
106+
font-size: 14px;
107+
font-weight: 500;
108+
height: 30px;
109+
110+
&:hover {
111+
background: @color-pf-blue-50;
112+
}
113+
}
114+
}
115+
116+
.uib-close {
117+
display: none;
118+
}
119+
}
120+
}

‎src/datepicker/datepicker.module.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* @name patternfly datepicker
3+
*
4+
* @description
5+
* Datepicker module for patternfly.
6+
*
7+
*/
8+
angular.module('patternfly.datepicker', ['ui.bootstrap']);
9+

‎src/datepicker/examples/bootstrap.datepicker.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/**
2+
* @ngdoc directive
3+
* @name patternfly.datepicker.componenet:pfBootstrapDatepicker
4+
* @element pf-bootstrap-datepicker
5+
*
6+
* @param {date} date Must be a Javascript Date - to be displayed in the input. Can be left empty.
7+
* @param {string} format Optional date format for displayed dates ('MM/dd/yyyy' by default).
8+
* @param {boolean} isOpen Optional boolean for determining whether or not to have the datepicker default to open (false by default).
9+
* @param {string} popupPlacement Optional configuration string used to position the popup datepicker relative to the input element. See {@link https://angular-ui.github.io/bootstrap/#datepickerPopup Angular UI Datepicker Popup}.
10+
* @param {object} dateOptions Optional uib-datepicker configuration object. See {@link https://angular-ui.github.io/bootstrap/#datepicker Angular UI Datepicker}.
11+
*
12+
* @description
13+
* A wrapper for the Angular UI {@link http://angular-ui.github.io/bootstrap/#!#datepickerPopup datepicker}.
14+
*
15+
* @example
16+
<example module="patternfly.datepicker">
17+
18+
<file name="index.html">
19+
<div ng-controller="DemoBootstrapDatepicker">
20+
<pf-bootstrap-datepicker
21+
date="date">
22+
</pf-bootstrap-datepicker>
23+
<pf-bootstrap-datepicker
24+
date=""
25+
format="{{format1}}"
26+
is-open="isOpen"
27+
popup-placement="{{popupPlacement}}"
28+
date-options="dateOptions">
29+
</pf-bootstrap-datepicker>
30+
</div>
31+
</file>
32+
33+
<file name="script.js">
34+
angular.module('patternfly.datepicker').controller('DemoBootstrapDatepicker', function( $scope ) {
35+
36+
// first datepicker
37+
$scope.date = new Date("Jan 1, 2000");
38+
39+
// second datepicker
40+
$scope.format1 = "MM/dd/yy";
41+
$scope.dateOptions = {
42+
showWeeks : true
43+
};
44+
$scope.isOpen = true;
45+
$scope.popupPlacement = "bottom-left";
46+
});
47+
</file>
48+
49+
</example>
50+
*/

‎src/patternfly.module.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
angular.module('patternfly', [
88
'patternfly.autofocus',
99
'patternfly.card',
10+
'patternfly.datepicker',
1011
'patternfly.filters',
1112
'patternfly.form',
1213
'patternfly.modals',

‎styles/angular-patternfly.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,5 @@
1414
@import "../src/canvas-view/canvas/canvas.less";
1515
@import "../src/canvas-view/canvas-editor/canvas-editor.less";
1616
@import "../src/pagination/pagination.less";
17+
@import "../src/datepicker/datepicker.less";
1718

‎test/datepicker/bootstrap-datepicker.spec.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
describe('Component: pfBootstrapDatepicker', function () {
2+
var $scope;
3+
var $compile;
4+
var element;
5+
6+
// load the controller's module
7+
beforeEach(function () {
8+
module('patternfly.datepicker', 'datepicker/datepicker.html');
9+
});
10+
11+
beforeEach(inject(function (_$compile_, _$rootScope_) {
12+
$compile = _$compile_;
13+
$scope = _$rootScope_;
14+
}));
15+
16+
var compileHTML = function (markup, scope) {
17+
element = angular.element(markup);
18+
$compile(element)(scope);
19+
20+
scope.$digest();
21+
};
22+
23+
beforeEach(function () {
24+
$scope.date = new Date("Jan 1, 2000");
25+
$scope.format = "MMM dd, yyyy";
26+
$scope.dateOptions = {
27+
showWeeks : true
28+
};
29+
30+
var htmlTmp = '<pf-bootstrap-datepicker date="date" format="{{format}}"></pf-bootstrap-datepicker>';
31+
32+
compileHTML(htmlTmp, $scope);
33+
});
34+
35+
it('should display the date in the correct format', function () {
36+
var input = element.find('input.datepicker')[0];
37+
expect(input.value).toBe("Jan 01, 2000");
38+
});
39+
40+
it('should open datepicker when button clicked', function () {
41+
var button = element.find('button.datepicker')[0],
42+
datepicker;
43+
44+
datepicker = element.find('ul.uib-datepicker-popup');
45+
expect(datepicker.length).toBe(0);
46+
47+
eventFire(button, 'click');
48+
49+
datepicker = element.find('ul.uib-datepicker-popup');
50+
expect(datepicker.length).toBe(1);
51+
});
52+
53+
it('should not display week numbers by default on datepicker', function () {
54+
var button = element.find('button.datepicker')[0],
55+
week;
56+
57+
eventFire(button, 'click');
58+
week = $(element.find('.uib-weeks')[0]);
59+
expect($("td", week).length).toBe(7);
60+
61+
});
62+
63+
it('should display week numbers if dateOptions is modified', function () {
64+
65+
// rebuild the element with the dateOptions included
66+
var htmlTmp = '<pf-bootstrap-datepicker date="date" format="{{format}}" date-options="dateOptions"></pf-bootstrap-datepicker>';
67+
compileHTML(htmlTmp, $scope);
68+
69+
// check each uib-weeks row in the datepicker has the week number + the seven days
70+
var button = element.find('button.datepicker')[0],
71+
week;
72+
eventFire(button, 'click');
73+
week = $(element.find('.uib-weeks')[0]);
74+
expect($("td", week).length).toBe(8);
75+
76+
});
77+
78+
});

0 commit comments

Comments
 (0)