This repository has been archived by the owner on May 29, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 6.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(timepicker): add timepicker directive
- Loading branch information
1 parent
e1bff6b
commit 9bc5207
Showing
6 changed files
with
930 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
}; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
Oops, something went wrong.