<!DOCTYPE html>
<html ng-app="mgcrea.ngStrapDocs">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script data-require="moment.js@2.8.3" data-semver="2.8.3" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/angular-motion.min.css" />
<link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/bootstrap-additions.min.css" />
<link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/libraries.min.css" />
<link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/main.min.css" />
<script src="//code.angularjs.org/1.2.23/angular.min.js" data-semver="1.2.23"></script>
<script src="//code.angularjs.org/1.2.23/angular-animate.min.js" data-semver="1.2.23"></script>
<script src="//code.angularjs.org/1.2.23/angular-sanitize.min.js" data-semver="1.2.23"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.1.1"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.1.1"></script>
<script src="app.js"></script>
<script src="//mgcrea.github.io/angular-strap/scripts/docs.tpl.js" data-semver="v2.1.1"></script>
<script src="//mgcrea.github.io/angular-strap/scripts/demo.tpl.js" data-semver="v2.1.1"></script>
</head>
<body ng-controller="MainCtrl">
<div class="bs-docs-section" ng-controller="TimepickerDemoCtrl">
<div class="page-header">
<h1 id="timepickers">Timepickers <a class="small" href="//github.com/mgcrea/angular-strap/blob/master/src/timepicker/timepicker.js" target="_blank">timepicker.js</a>
</h1>
<code>mgcrea.ngStrap.timepicker</code>
</div>
<div class="bs-example" style="padding-bottom: 24px;" append-source="">
<form name="timepickerForm" class="form-inline" role="form">
<!-- Basic example -->
<h3>Non working example</h3>
<p>When omitting time format min and max time are not honoured:</p>
<div class="form-group" ng-class="{'has-error': timepickerForm.time.$invalid}">
<label class="control-label">
<i class="fa fa-clock-o"></i> Time <small>(as date)</small>
</label>
<input type="text" class="form-control" size="8" ng-model="time" data-min-time="10:00" data-max-time="15:30" name="time" data-autoclose="1" bs-timepicker="" />
</div>
<!-- Custom example -->
<h3>Working examples</h3>
<p>When specifying time format min and max time are honoured, like in these examples:</p>
<div class="form-group" ng-class="{'has-error': timepickerForm.time.$invalid}">
<label class="control-label">
<i class="fa fa-clock-o"></i>
Time <small>(as date)</small>
</label>
<input type="text" class="form-control" size="8" ng-model="time" data-time-format="HH:mm" data-min-time="10:00" data-max-time="15:30" name="time" data-autoclose="1" bs-timepicker="" />
</div>
<div class="form-group" ng-class="{'has-error': timepickerForm.time2.$invalid}">
<label class="control-label">
<i class="fa fa-clock-o"></i>
Time <small>(as number)</small>
</label>
<input type="text" class="form-control" size="5" ng-model="selectedTimeAsNumber" data-time-format="HH:mm" data-time-type="number" data-min-time="10:00" data-max-time="15:30" data-autoclose="1" name="time2" bs-timepicker="" />
</div>
</form>
</div>
</div>
</body>
</html>
/* Put your css in here */
body {
padding: 40px !important;
}
var app = angular.module('mgcrea.ngStrapDocs', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap']);
app.controller('MainCtrl', function($scope) {
});
'use strict';
angular.module('mgcrea.ngStrapDocs')
.controller('TimepickerDemoCtrl', function($scope, $http) {
$scope.minTime = moment().hour(10).minutes(0).toDate();
$scope.maxTime = moment().hour(15).minutes(30).toDate();
$scope.time = new Date(1970, 0, 1, 10, 30);
$scope.selectedTimeAsNumber = 10 * 36e5;
$scope.selectedTimeAsString = '10:00';
$scope.sharedDate = new Date(new Date().setMinutes(0));
});