Input Type Time With Angular.js

January 26, 2023 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 = new Date(response.data.start_time);

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

Baca Juga

Solution 4:

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/

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>
<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>

Html5 stackoverflow Examples