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

Commit 6724a72

Browse files
Justin Hallpkozlowski-opensource
Justin Hall
authored and
pkozlowski-opensource
committed
feat(timepicker): restyled for bootstrap 3
1 parent a99b360 commit 6724a72

File tree

3 files changed

+84
-40
lines changed

3 files changed

+84
-40
lines changed

‎src/timepicker/docs/demo.html

+25-8
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,31 @@
11
<div ng-controller="TimepickerDemoCtrl">
2-
<div ng-model="mytime" ng-change="changed()" class="well well-small" style="display:inline-block;">
3-
<timepicker hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker>
2+
3+
<div ng-model="mytime" ng-change="changed()" class="row" style="display:inline-block;">
4+
<div class="row">
5+
<div class="col-xs-5 col-lg-5">
6+
<timepicker hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker>
7+
</div>
8+
</div>
49
</div>
510

6-
<pre>Time is: {{mytime | date:'shortTime' }}</pre>
711

8-
<div>Hours step is: <select ng-model="hstep" ng-options="opt for opt in options.hstep"></select></div>
9-
<div>Minutes step is: <select ng-model="mstep" ng-options="opt for opt in options.mstep"></select></div>
12+
<pre class="alert alert-info">Time is: {{mytime | date:'shortTime' }}</pre>
13+
14+
<div class="row">
15+
<div class="col-xs-6">
16+
Hours step is:
17+
<select class="form-control" ng-model="hstep" ng-options="opt for opt in options.hstep"></select>
18+
</div>
19+
<div class="col-xs-6">
20+
Minutes step is:
21+
<select class="form-control" ng-model="mstep" ng-options="opt for opt in options.mstep"></select>
22+
</div>
23+
</div>
1024

11-
<button class="btn" ng-click="toggleMode()">12H / 24H</button>
12-
<button class="btn" ng-click="update()">Set to 14:00</button>
25+
<hr>
26+
27+
<button class="btn btn-info" ng-click="toggleMode()">12H / 24H</button>
28+
<button class="btn btn-default" ng-click="update()">Set to 14:00</button>
1329
<button class="btn btn-danger" ng-click="clear()">Clear</button>
14-
</div>
30+
31+
</div>

‎src/timepicker/test/timepicker.spec.js

+21-12
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
2+
13
describe('timepicker directive', function () {
24
var $rootScope, element;
35

@@ -37,15 +39,15 @@ describe('timepicker directive', function () {
3739
}
3840

3941
function getArrow(isUp, tdIndex) {
40-
return element.find('tr').eq( (isUp) ? 0 : 2 ).find('td').eq( tdIndex ).find('a').eq(0);
42+
return element.children('div').eq( (isUp) ? 0 : 2 ).find('div').eq( tdIndex ).find('a').eq(0);
4143
}
4244

4345
function getHoursButton(isUp) {
4446
return getArrow(isUp, 0);
4547
}
4648

4749
function getMinutesButton(isUp) {
48-
return getArrow(isUp, 2);
50+
return getArrow(isUp, 1);
4951
}
5052

5153
function getMeridianButton() {
@@ -71,8 +73,7 @@ describe('timepicker directive', function () {
7173
return e;
7274
}
7375

74-
it('contains three row & three input elements', function() {
75-
expect(element.find('tr').length).toBe(3);
76+
it('contains three input elements and one button', function() {
7677
expect(element.find('input').length).toBe(2);
7778
expect(element.find('button').length).toBe(1);
7879
});
@@ -321,7 +322,9 @@ describe('timepicker directive', function () {
321322

322323
it('responds properly on "wheel" events', function() {
323324
var inputs = element.find('input');
324-
var hoursEl = inputs.eq(0), minutesEl = inputs.eq(1);
325+
var hoursEl = inputs.eq(0),
326+
minutesEl = inputs.eq(1);
327+
325328
var upMouseWheelEvent = wheelThatOtherMouse(-1);
326329
var downMouseWheelEvent = wheelThatOtherMouse(1);
327330

@@ -550,7 +553,7 @@ describe('timepicker directive', function () {
550553
it('initially displays correct time when `show-meridian` is false', function() {
551554
expect(getTimeState(true)).toEqual(['14', '10']);
552555
expect(getModelState()).toEqual([14, 10]);
553-
expect(getMeridianTd().css('display')).toBe('none');
556+
expect(getMeridianButton().css('display')).toBe('none');
554557
});
555558

556559
it('toggles correctly between different modes', function() {
@@ -566,7 +569,7 @@ describe('timepicker directive', function () {
566569
$rootScope.$digest();
567570
expect(getTimeState(true)).toEqual(['14', '10']);
568571
expect(getModelState()).toEqual([14, 10]);
569-
expect(getMeridianTd().css('display')).toBe('none');
572+
expect(getMeridianButton().css('display')).toBe('none');
570573
});
571574

572575
it('handles correctly initially empty model on parent element', function() {
@@ -724,15 +727,17 @@ describe('timepicker directive', function () {
724727

725728
changeInputValueTo(el, 'pizza');
726729
expect($rootScope.time).toBe(null);
727-
expect(el.parent().hasClass('error')).toBe(true);
730+
731+
expect(el.parent().hasClass('has-error')).toBe(true);
728732
expect(element.hasClass('ng-invalid-time')).toBe(true);
729733

730734
changeInputValueTo(el, 8);
731735
el.blur();
732736
$rootScope.$digest();
733737
expect(getTimeState()).toEqual(['08', '40', 'PM']);
734738
expect(getModelState()).toEqual([20, 40]);
735-
expect(el.parent().hasClass('error')).toBe(false);
739+
740+
expect(el.parent().hasClass('has-error')).toBe(false);
736741
expect(element.hasClass('ng-invalid-time')).toBe(false);
737742
});
738743

@@ -741,13 +746,15 @@ describe('timepicker directive', function () {
741746

742747
changeInputValueTo(el, 'pizza');
743748
expect($rootScope.time).toBe(null);
744-
expect(el.parent().hasClass('error')).toBe(true);
749+
750+
expect(el.parent().hasClass('has-error')).toBe(true);
745751
expect(element.hasClass('ng-invalid-time')).toBe(true);
746752

747753
changeInputValueTo(el, 22);
748754
expect(getTimeState()).toEqual(['02', '22', 'PM']);
749755
expect(getModelState()).toEqual([14, 22]);
750-
expect(el.parent().hasClass('error')).toBe(false);
756+
757+
expect(el.parent().hasClass('has-error')).toBe(false);
751758
expect(element.hasClass('ng-invalid-time')).toBe(false);
752759
});
753760

@@ -760,7 +767,8 @@ describe('timepicker directive', function () {
760767

761768
changeInputValueTo(el, '16');
762769
expect($rootScope.time).toBe(null);
763-
expect(el.parent().hasClass('error')).toBe(true);
770+
771+
expect(el.parent().hasClass('has-error')).toBe(true);
764772
expect(element.hasClass('ng-invalid-time')).toBe(true);
765773

766774
$rootScope.meridian = false;
@@ -871,3 +879,4 @@ describe('timepicker directive', function () {
871879

872880
});
873881

882+

‎template/timepicker/timepicker.html

+38-20
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,38 @@
1-
<table class="form-inline">
2-
<tr class="text-center">
3-
<td><a ng-click="incrementHours()" class="btn btn-link"><i class="icon-chevron-up"></i></a></td>
4-
<td>&nbsp;</td>
5-
<td><a ng-click="incrementMinutes()" class="btn btn-link"><i class="icon-chevron-up"></i></a></td>
6-
<td ng-show="showMeridian"></td>
7-
</tr>
8-
<tr>
9-
<td class="control-group" ng-class="{'error': invalidHours}"><input type="text" ng-model="hours" ng-change="updateHours()" class="span1 text-center" ng-mousewheel="incrementHours()" ng-readonly="readonlyInput" maxlength="2"></td>
10-
<td>:</td>
11-
<td class="control-group" ng-class="{'error': invalidMinutes}"><input type="text" ng-model="minutes" ng-change="updateMinutes()" class="span1 text-center" ng-readonly="readonlyInput" maxlength="2"></td>
12-
<td ng-show="showMeridian"><button type="button" ng-click="toggleMeridian()" class="btn text-center">{{meridian}}</button></td>
13-
</tr>
14-
<tr class="text-center">
15-
<td><a ng-click="decrementHours()" class="btn btn-link"><i class="icon-chevron-down"></i></a></td>
16-
<td>&nbsp;</td>
17-
<td><a ng-click="decrementMinutes()" class="btn btn-link"><i class="icon-chevron-down"></i></a></td>
18-
<td ng-show="showMeridian"></td>
19-
</tr>
20-
</table>
1+
<span>
2+
<div class="row">
3+
<div class="col-xs-4 text-center">
4+
<a ng-click="incrementHours()" class="btn btn-link"><i class="glyphicon glyphicon-chevron-up"></i></a>
5+
</div>
6+
<div class="col-xs-6 text-center">
7+
<a ng-click="incrementMinutes()" class="btn btn-link"><i class="glyphicon glyphicon-chevron-up"></i></a>
8+
</div>
9+
<div class="col-xs-2"> </div>
10+
</div>
11+
12+
<div class="row">
13+
<div class="col-xs-4">
14+
<div class="form-group" ng-class="{'has-error': invalidHours}" style="margin-bottom: 0px">
15+
<input type="text" ng-model="hours" ng-change="updateHours()" class="form-control text-center" ng-mousewheel="incrementHours()" ng-readonly="readonlyInput" maxlength="2">
16+
</div>
17+
</div>
18+
<div class="col-xs-6">
19+
<div class="input-group" ng-class="{'has-error': invalidMinutes}">
20+
<span class="input-group-addon">:</span>
21+
<input type="text" ng-model="minutes" ng-change="updateMinutes()" class="form-control text-center" ng-readonly="readonlyInput" maxlength="2">
22+
</div>
23+
</div>
24+
<div class="col-xs-2">
25+
<button ng-click="toggleMeridian()" class="btn btn-default text-center" ng-show="showMeridian">{{meridian}}</button>
26+
</div>
27+
</div>
28+
29+
<div class="row">
30+
<div class="col-xs-4 text-center">
31+
<a ng-click="decrementHours()" class="btn btn-link"><i class="glyphicon glyphicon-chevron-down"></i></a>
32+
</div>
33+
<div class="col-xs-6 text-center">
34+
<a ng-click="decrementMinutes()" class="btn btn-link"><i class="glyphicon glyphicon-chevron-down"></i></a>
35+
</div>
36+
<div class="col-xs-2"> </div>
37+
</div>
38+
</span>

0 commit comments

Comments
 (0)