Input Type Time With Angular.js

October 23, 2024 Post a Comment

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 do

Solution 1:

I think you need at least Angular 1.3.0 beta for this to work, as it looks like it was introduced then.

Changelog:

...
Features
input: support types date, time, datetime-local, month, week (46bd6dc8, #5864) ....

Solution 2:

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();

Solution 3:

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 = newDate(response.data.start_time);

this will parse the full date as a time HH:MM:SS Successfully

Solution 4:

Change $scope.time = new Date(); in your code to:

var d = newDate();
$scope.time = d.getHours() + ':' + d.getMinutes();

Working code: http://jsfiddle.net/bitsmith/asjv8ycq/1/

Solution 5:

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><htmllang="en"><head><title>AngularJS Directives : input[time]</title><scriptsrc="angular.js"></script><style>b{font-family:Papyrus; color:#fa4b2a; font-size: 20px;} 
  </style></head><bodyng-app="timeDemo"><script>
 angular.module('timeDemo', [])
   .controller('timeController', ['$scope', function($scope) {
     $scope.sample = {
       value: newDate(1999, 0, 1, 15, 30, 0)
     };
   }]);
</script><formname="demoForm"ng-controller="timeController as timeCtrl"><labelfor="sampleInput">Select a time from 6 am to 6 pm</label><inputtype="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 --><divrole="alert"><spanclass="error"ng-show="demoForm.input.$error.required">
        Input is Required!</span><!-- Required Error  --><spanclass="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>

Html5 Developer