According to the Docs input[time]: https://docs.angularjs.org/api/ng/input/input%5Btime%5D
it should be enough to use the input type time and bind it to a date oject, however it doesn't work as I'd expect it.
<input ng-model="time" type="time" placeholder="HH:mm" min="08:00" max="17:00" required >
and
$scope.time = new Date();
as a Result I'd like to see just the HH:mm within the input field.
Here's a jsfiddle to play around:
I think you need at least Angular 1.3.0 beta for this to work, as it looks like it was introduced then.
...
Features
input: support types date, time, datetime-local, month, week (46bd6dc8, #5864)
....
external resource to the left. jsfiddle.net/U3pVM/7322
You could achieve that, follow my code, http://plnkr.co/edit/60aiH0eJ8ee0FlEsQE2m?p=info
Basically i use momentjs, and set seconds and milliseconds to zero, that way browser will not render that.
moment().second(0).milliseconds(0).toDate();
Here's an example of how to use input="time" with angularJS and bind it using ng-model directive
HTML: <input type="time" ng-model="myTime"/>
in the controller, we assign time came from database to date a new object
$scope.myTime = new Date(response.data.start_time);
this will parse the full date as a time HH:MM:SS Successfully
Change $scope.time = new Date(); in your code to:
var d = new Date();
$scope.time = d.getHours() + ':' + d.getMinutes();
Working code: http://jsfiddle.net/bitsmith/asjv8ycq/1/
AngularJS Element Directive input[time] is used to create HTML time input with time validation and transformation.
The input must be provided in the format ISO-8601, i.e local time format HH:mm:ss, for example 15:35:10
The data model must be a Date Object, timezones used to read/write Date instance are defined using ngModel Syntax
<input type="time"
ng-model="string"
[name="string"]
[min="string"]
[max="string"]
[required="string"]
[ng-required="string"]
[ng-change="string"]>
Use following code to bind time and for getting other attribute related to input type time.
<!doctype html>
<html lang="en">
<head>
<title>AngularJS Directives : input[time]</title>
<script src="angular.js"></script>
<style>
b{font-family:Papyrus; color:#fa4b2a; font-size: 20px;}
</style>
</head>
<body ng-app="timeDemo">
<script>
angular.module('timeDemo', [])
.controller('timeController', ['$scope', function($scope) {
$scope.sample = {
value: new Date(1999, 0, 1, 15, 30, 0)
};
}]);
</script>
<form name="demoForm" ng-controller="timeController as timeCtrl">
<label for="sampleInput">Select a time from 6 am to 6 pm</label>
<input type="time" id="sampleInput" name="input" ng-model="sample.value"
placeholder="HH:mm:ss" min="06:00:00" max="18:00:00" required />
<!-- min 6 am and max 6 pm i.e 18:00 -->
<div role="alert">
<span class="error" ng-show="demoForm.input.$error.required">
Input is Required!</span>
<!-- Required Error -->
<span class="error" ng-show="demoForm.input.$error.time">
Input Date is not Valid!</span>
<!-- Validation Error -->
</div>
<i>value = <b>{{sample.value | date: "HH:mm:ss"}}</b></i><br/>
<i>demoForm.input.$valid = <b>{{demoForm.input.$valid}}</b></i><br/>
<i>demoForm.input.$error = <b>{{demoForm.input.$error}}</b></i><br/>
<i>demoForm.$valid = <b>{{demoForm.$valid}}</b></i><br/>
<i>demoForm.$error.required = <b>{{!!demoForm.$error.required}}</b></i><br/>
</form>
</body>
</html>
Below will ensure your input always has HH:mm format.
$scope.time = return new Date(date.getFullYear(), date.getMonth(), date.getDate(),
date.getHours(), date.getMinutes());
Additionally, a function can be written in the controller end to format all Date values to be fed in time input
getFormatDate = function (val) { // assuming val is date like "/Date(946673340000)/"
if (val != undefined) {
date = new Date(val.match(/\d+/)[0] * 1); // creating a date object from val
return new Date(date.getFullYear(), date.getMonth(), date.getDate(),
date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
}
}
