Skip to content

Commit

Permalink
feat(timepicker): add timepicker directive
Browse files Browse the repository at this point in the history
  • Loading branch information
bekos authored and pkozlowski-opensource committed Jun 9, 2013
1 parent e1bff6b commit 9bc5207
Show file tree
Hide file tree
Showing 6 changed files with 930 additions and 0 deletions.
12 changes: 12 additions & 0 deletions src/timepicker/docs/demo.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<div ng-controller="TimepickerDemoCtrl">
<timepicker ng-model="mytime" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker>

<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>

<button class="btn" ng-click="toggleMode()">12H / 24H</button>
<button class="btn" ng-click="update()">Set to 14:00</button>
<button class="btn btn-danger" ng-click="clear()">Clear</button>
</div>
27 changes: 27 additions & 0 deletions src/timepicker/docs/demo.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
var TimepickerDemoCtrl = function ($scope) {
$scope.mytime = new Date();

$scope.hstep = 1;
$scope.mstep = 15;

$scope.options = {
hstep: [1, 2, 3],
mstep: [1, 5, 10, 15, 25, 30]
};

$scope.ismeridian = true;
$scope.toggleMode = function() {
$scope.ismeridian = ! $scope.ismeridian;
};

$scope.update = function() {
var d = new Date();
d.setHours( 14 );
d.setMinutes( 0 );
$scope.mytime = d;
};

$scope.clear = function() {
$scope.mytime = null;
};
};
33 changes: 33 additions & 0 deletions src/timepicker/docs/readme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
A lightweight & configurable timepicker directive.

### Settings ###

All settings can be provided as attributes in the `<timepicker>` or globally configured through the `timepickerConfig`.

* `ng-model` <i class="icon-eye-open"></i>
:
The Date object that provides the time state.

* `hour-step` <i class="icon-eye-open"></i>
_(Defaults: 1)_ :
Number of hours to increase or decrease when using a button.

* `minute-step` <i class="icon-eye-open"></i>
_(Defaults: 1)_ :
Number of minutes to increase or decrease when using a button.

* `show-meridian` <i class="icon-eye-open"></i>
_(Defaults: true)_ :
Whether to display 12H or 24H mode.

* `meridians`
_(Defaults: ['AM', 'PM'])_ :
Meridian labels

* `readonly-input`
_(Defaults: false)_ :
Whether user can type inside the hours & minutes input.

* `mousewheel`
_(Defaults: true)_ :
Whether user can scroll inside the hours & minutes input to increase or decrease it's values.
Loading

0 comments on commit 9bc5207

Please sign in to comment.