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

Commit

Permalink
feat(timepicker): restyled for bootstrap 3
Browse files Browse the repository at this point in the history
  • Loading branch information
Justin Hall authored and pkozlowski-opensource committed Dec 28, 2013
1 parent a99b360 commit 6724a72
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 40 deletions.
33 changes: 25 additions & 8 deletions src/timepicker/docs/demo.html
Original file line number Diff line number Diff line change
@@ -1,14 +1,31 @@
<div ng-controller="TimepickerDemoCtrl">
<div ng-model="mytime" ng-change="changed()" class="well well-small" style="display:inline-block;">
<timepicker hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker>

<div ng-model="mytime" ng-change="changed()" class="row" style="display:inline-block;">
<div class="row">
<div class="col-xs-5 col-lg-5">
<timepicker hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker>
</div>
</div>
</div>

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

<div>Hours step is: <select ng-model="hstep" ng-options="opt for opt in options.hstep"></select></div>
<div>Minutes step is: <select ng-model="mstep" ng-options="opt for opt in options.mstep"></select></div>
<pre class="alert alert-info">Time is: {{mytime | date:'shortTime' }}</pre>

<div class="row">
<div class="col-xs-6">
Hours step is:
<select class="form-control" ng-model="hstep" ng-options="opt for opt in options.hstep"></select>
</div>
<div class="col-xs-6">
Minutes step is:
<select class="form-control" ng-model="mstep" ng-options="opt for opt in options.mstep"></select>
</div>
</div>

<button class="btn" ng-click="toggleMode()">12H / 24H</button>
<button class="btn" ng-click="update()">Set to 14:00</button>
<hr>

<button class="btn btn-info" ng-click="toggleMode()">12H / 24H</button>
<button class="btn btn-default" ng-click="update()">Set to 14:00</button>
<button class="btn btn-danger" ng-click="clear()">Clear</button>
</div>

</div>
33 changes: 21 additions & 12 deletions src/timepicker/test/timepicker.spec.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@


describe('timepicker directive', function () {
var $rootScope, element;

Expand Down Expand Up @@ -37,15 +39,15 @@ describe('timepicker directive', function () {
}

function getArrow(isUp, tdIndex) {
return element.find('tr').eq( (isUp) ? 0 : 2 ).find('td').eq( tdIndex ).find('a').eq(0);
return element.children('div').eq( (isUp) ? 0 : 2 ).find('div').eq( tdIndex ).find('a').eq(0);
}

function getHoursButton(isUp) {
return getArrow(isUp, 0);
}

function getMinutesButton(isUp) {
return getArrow(isUp, 2);
return getArrow(isUp, 1);
}

function getMeridianButton() {
Expand All @@ -71,8 +73,7 @@ describe('timepicker directive', function () {
return e;
}

it('contains three row & three input elements', function() {
expect(element.find('tr').length).toBe(3);
it('contains three input elements and one button', function() {
expect(element.find('input').length).toBe(2);
expect(element.find('button').length).toBe(1);
});
Expand Down Expand Up @@ -321,7 +322,9 @@ describe('timepicker directive', function () {

it('responds properly on "wheel" events', function() {
var inputs = element.find('input');
var hoursEl = inputs.eq(0), minutesEl = inputs.eq(1);
var hoursEl = inputs.eq(0),
minutesEl = inputs.eq(1);

var upMouseWheelEvent = wheelThatOtherMouse(-1);
var downMouseWheelEvent = wheelThatOtherMouse(1);

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

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

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

changeInputValueTo(el, 'pizza');
expect($rootScope.time).toBe(null);
expect(el.parent().hasClass('error')).toBe(true);

expect(el.parent().hasClass('has-error')).toBe(true);
expect(element.hasClass('ng-invalid-time')).toBe(true);

changeInputValueTo(el, 8);
el.blur();
$rootScope.$digest();
expect(getTimeState()).toEqual(['08', '40', 'PM']);
expect(getModelState()).toEqual([20, 40]);
expect(el.parent().hasClass('error')).toBe(false);

expect(el.parent().hasClass('has-error')).toBe(false);
expect(element.hasClass('ng-invalid-time')).toBe(false);
});

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

changeInputValueTo(el, 'pizza');
expect($rootScope.time).toBe(null);
expect(el.parent().hasClass('error')).toBe(true);

expect(el.parent().hasClass('has-error')).toBe(true);
expect(element.hasClass('ng-invalid-time')).toBe(true);

changeInputValueTo(el, 22);
expect(getTimeState()).toEqual(['02', '22', 'PM']);
expect(getModelState()).toEqual([14, 22]);
expect(el.parent().hasClass('error')).toBe(false);

expect(el.parent().hasClass('has-error')).toBe(false);
expect(element.hasClass('ng-invalid-time')).toBe(false);
});

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

changeInputValueTo(el, '16');
expect($rootScope.time).toBe(null);
expect(el.parent().hasClass('error')).toBe(true);

expect(el.parent().hasClass('has-error')).toBe(true);
expect(element.hasClass('ng-invalid-time')).toBe(true);

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

});


58 changes: 38 additions & 20 deletions template/timepicker/timepicker.html
Original file line number Diff line number Diff line change
@@ -1,20 +1,38 @@
<table class="form-inline">
<tr class="text-center">
<td><a ng-click="incrementHours()" class="btn btn-link"><i class="icon-chevron-up"></i></a></td>
<td>&nbsp;</td>
<td><a ng-click="incrementMinutes()" class="btn btn-link"><i class="icon-chevron-up"></i></a></td>
<td ng-show="showMeridian"></td>
</tr>
<tr>
<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>
<td>:</td>
<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>
<td ng-show="showMeridian"><button type="button" ng-click="toggleMeridian()" class="btn text-center">{{meridian}}</button></td>
</tr>
<tr class="text-center">
<td><a ng-click="decrementHours()" class="btn btn-link"><i class="icon-chevron-down"></i></a></td>
<td>&nbsp;</td>
<td><a ng-click="decrementMinutes()" class="btn btn-link"><i class="icon-chevron-down"></i></a></td>
<td ng-show="showMeridian"></td>
</tr>
</table>
<span>
<div class="row">
<div class="col-xs-4 text-center">
<a ng-click="incrementHours()" class="btn btn-link"><i class="glyphicon glyphicon-chevron-up"></i></a>
</div>
<div class="col-xs-6 text-center">
<a ng-click="incrementMinutes()" class="btn btn-link"><i class="glyphicon glyphicon-chevron-up"></i></a>
</div>
<div class="col-xs-2"> </div>
</div>

<div class="row">
<div class="col-xs-4">
<div class="form-group" ng-class="{'has-error': invalidHours}" style="margin-bottom: 0px">
<input type="text" ng-model="hours" ng-change="updateHours()" class="form-control text-center" ng-mousewheel="incrementHours()" ng-readonly="readonlyInput" maxlength="2">
</div>
</div>
<div class="col-xs-6">
<div class="input-group" ng-class="{'has-error': invalidMinutes}">
<span class="input-group-addon">:</span>
<input type="text" ng-model="minutes" ng-change="updateMinutes()" class="form-control text-center" ng-readonly="readonlyInput" maxlength="2">
</div>
</div>
<div class="col-xs-2">
<button ng-click="toggleMeridian()" class="btn btn-default text-center" ng-show="showMeridian">{{meridian}}</button>
</div>
</div>

<div class="row">
<div class="col-xs-4 text-center">
<a ng-click="decrementHours()" class="btn btn-link"><i class="glyphicon glyphicon-chevron-down"></i></a>
</div>
<div class="col-xs-6 text-center">
<a ng-click="decrementMinutes()" class="btn btn-link"><i class="glyphicon glyphicon-chevron-down"></i></a>
</div>
<div class="col-xs-2"> </div>
</div>
</span>

0 comments on commit 6724a72

Please sign in to comment.