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

feat(timepicker): add timepicker directive #358

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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