var app = angular.module('plunker', ['ui.bootstrap', 'ps.inputTime']);
app.controller('MainCtrl', function($scope) {
$scope.mytime1 = new Date();
$scope.mytime2 = new Date();
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css@*" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.0/angular.js" data-semver="1.2.0"></script>
<script data-require="angular-ui-bootstrap@*" data-semver="0.6.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.min.js"></script>
<script src="https://rawgithub.com/randallmeeker/ps-input-time/master/ps-input-time.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl" style="padding: 20px">
<h2>Testing a few use case senarios.</h2>
<div class="well">
<p>
Use arrow keys (Up,Down,Left,Right,TAB) to navigate and change time.
<br>
Input time manually as hh:mmAM, HH:mm, hhmm, HH.mm
</p>
</div>
<p><strong>ngModel:</strong> required, watched, date object, default: local now</p>
<p><strong>fixedDay:</strong> optional, boolean, default: false. If time can move past a 24 hour restriction.</p>
<p><strong>minuteStep:</strong> optional, numeric, default: 5. How many minutes to increase time when using the UP arrow key. The down arrow key always is 1 minute.</p>
<p><strong>min/max:</strong> optional, watched, date object, forces limits. When used forces fixedDay = false</p>
<h2>Stand Alone</h2>
<input type="text" class="form-control" format="hh:mm" ng-model="mytime1" required ps-input-time />
<span class="label label-default">Date: {{mytime1 | date:'medium'}}</span>
<hr>
<h2>With UI Date Picker <small>and multiple time inputs</small></h2>
<div class="row">
<div class="col-sm-6">
Date:
<input datepicker-popup="MMM-EEEE-dd" class="form-control" ng-model="shift.mytime2">
<div class="well">Date: {{shift.mytime2 | date:'medium'}}</div>
</div>
<div class="col-sm-6">
Times:
<input type="text" class="form-control" ng-model="shift.mytime2" required ps-input-time />
<timepicker ng-model="shift.mytime2"></timepicker>
</div>
</div>
<hr>
<h2>Start - End Time <small>End time is limited by start time.</small></h2>
<label>Date
<input datepicker-popup="MMM-EEEE-dd" class="form-control" ng-model="rangeStart">
</label>
<label>
Start Time
<input class="form-control" ng-model="rangeStart" ps-input-time>
</label>
<label>
End Time
<input class="form-control" min="rangeStart" ng-model="rangeEnd" ps-input-time >
</label>
<div class="well">Range: {{rangeStart | date:'medium'}} - {{rangeEnd | date:'medium'}}</div>
</body>
</html>
/* Put your css in here */
.ng-invalid{
border: 1px solid pink !important;
}
pl-timeinput
============
AngularJS time selector
<input type="text" ng-model="myTime" ps-input-time>;
If your interested please rip this apart. Looking for lessons in proper use of AngularJs, javaScript and GitHub.
ToDo
-Select each time part needs to fail silently when manually editing time
-Wrap a popup (like AngularUI) for easy mobile input, or if possible, revert to html5 input=time for mobile.
-Support inputing time in the following additional formats HH:mm, HHmm, hhmmAA (for speed I want time to be able to be input with keypad only)
-KeyPress TAB should scroll through time parts, and leave input after.