Skip to content

Commit 9613b61

Browse files
lazychinopkozlowski-opensource
lazychino
authored and
pkozlowski-opensource
committed
fix(timepicker): fix look with bootstrap3
Closes angular-ui#1285
1 parent 6724a72 commit 9613b61

File tree

3 files changed

+34
-59
lines changed

3 files changed

+34
-59
lines changed

‎src/timepicker/docs/demo.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
<div ng-controller="TimepickerDemoCtrl">
22

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">
3+
<div ng-model="mytime" ng-change="changed()" style="display:inline-block;">
64
<timepicker hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker>
7-
</div>
8-
</div>
95
</div>
106

117

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

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
2-
31
describe('timepicker directive', function () {
42
var $rootScope, element;
53

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

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

4543
function getHoursButton(isUp) {
4644
return getArrow(isUp, 0);
4745
}
4846

4947
function getMinutesButton(isUp) {
50-
return getArrow(isUp, 1);
48+
return getArrow(isUp, 2);
5149
}
5250

5351
function getMeridianButton() {
@@ -73,7 +71,8 @@ describe('timepicker directive', function () {
7371
return e;
7472
}
7573

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

323322
it('responds properly on "wheel" events', function() {
324323
var inputs = element.find('input');
325-
var hoursEl = inputs.eq(0),
326-
minutesEl = inputs.eq(1);
327-
324+
var hoursEl = inputs.eq(0), minutesEl = inputs.eq(1);
328325
var upMouseWheelEvent = wheelThatOtherMouse(-1);
329326
var downMouseWheelEvent = wheelThatOtherMouse(1);
330327

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

559556
it('toggles correctly between different modes', function() {
@@ -569,7 +566,7 @@ describe('timepicker directive', function () {
569566
$rootScope.$digest();
570567
expect(getTimeState(true)).toEqual(['14', '10']);
571568
expect(getModelState()).toEqual([14, 10]);
572-
expect(getMeridianButton().css('display')).toBe('none');
569+
expect(getMeridianTd().css('display')).toBe('none');
573570
});
574571

575572
it('handles correctly initially empty model on parent element', function() {
@@ -727,7 +724,6 @@ describe('timepicker directive', function () {
727724

728725
changeInputValueTo(el, 'pizza');
729726
expect($rootScope.time).toBe(null);
730-
731727
expect(el.parent().hasClass('has-error')).toBe(true);
732728
expect(element.hasClass('ng-invalid-time')).toBe(true);
733729

@@ -736,7 +732,6 @@ describe('timepicker directive', function () {
736732
$rootScope.$digest();
737733
expect(getTimeState()).toEqual(['08', '40', 'PM']);
738734
expect(getModelState()).toEqual([20, 40]);
739-
740735
expect(el.parent().hasClass('has-error')).toBe(false);
741736
expect(element.hasClass('ng-invalid-time')).toBe(false);
742737
});
@@ -746,14 +741,12 @@ describe('timepicker directive', function () {
746741

747742
changeInputValueTo(el, 'pizza');
748743
expect($rootScope.time).toBe(null);
749-
750744
expect(el.parent().hasClass('has-error')).toBe(true);
751745
expect(element.hasClass('ng-invalid-time')).toBe(true);
752746

753747
changeInputValueTo(el, 22);
754748
expect(getTimeState()).toEqual(['02', '22', 'PM']);
755749
expect(getModelState()).toEqual([14, 22]);
756-
757750
expect(el.parent().hasClass('has-error')).toBe(false);
758751
expect(element.hasClass('ng-invalid-time')).toBe(false);
759752
});
@@ -767,7 +760,6 @@ describe('timepicker directive', function () {
767760

768761
changeInputValueTo(el, '16');
769762
expect($rootScope.time).toBe(null);
770-
771763
expect(el.parent().hasClass('has-error')).toBe(true);
772764
expect(element.hasClass('ng-invalid-time')).toBe(true);
773765

@@ -879,4 +871,3 @@ describe('timepicker directive', function () {
879871

880872
});
881873

882-

‎template/timepicker/timepicker.html‎

Lines changed: 26 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,26 @@
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>
1+
<table>
2+
<tbody>
3+
<tr class="text-center">
4+
<td><a ng-click="incrementHours()" class="btn btn-link"><span class="glyphicon glyphicon-chevron-up"></span></a></td>
5+
<td>&nbsp;</td>
6+
<td><a ng-click="incrementMinutes()" class="btn btn-link"><span class="glyphicon glyphicon-chevron-up"></span></a></td>
7+
<td ng-show="showMeridian"></td>
8+
</tr>
9+
<tr>
10+
<td style="width:50px;" class="form-group" ng-class="{'has-error': invalidHours}">
11+
<input type="text" ng-model="hours" ng-change="updateHours()" class="form-control text-center" ng-mousewheel="incrementHours()" ng-readonly="readonlyInput" maxlength="2">
12+
</td>
13+
<td>:</td>
14+
<td style="width:50px;" class="form-group" ng-class="{'has-error': invalidMinutes}">
15+
<input type="text" ng-model="minutes" ng-change="updateMinutes()" class="form-control text-center" ng-readonly="readonlyInput" maxlength="2">
16+
</td>
17+
<td ng-show="showMeridian"><button class="btn btn-default text-center" ng-click="toggleMeridian()">{{meridian}}</button></td>
18+
</tr>
19+
<tr class="text-center">
20+
<td><a ng-click="decrementHours()" class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
21+
<td>&nbsp;</td>
22+
<td><a ng-click="decrementMinutes()" class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
23+
<td ng-show="showMeridian"></td>
24+
</tr>
25+
</tbody>
26+
</table>

0 commit comments

Comments
 (0)