6

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:

http://jsfiddle.net/U3pVM/7314/

1

6 Answers 6

3

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

5
  • I tried to update my jsfiddle with the latest beta relaese but didn't seem to work :(
    – Alx
    Commented Jul 27, 2014 at 19:47
  • @80leaves this one should work. Added it as an external resource to the left. jsfiddle.net/U3pVM/7322
    – Matsemann
    Commented Jul 27, 2014 at 20:00
  • thanks, but I'm experiencing a wierd behaviour. In Firefox the input displays the placeholder HH:mm and in Chrome --:--. Changing the value to let's say 12:00 the variable {{test}} is updated properly, but I can't initialize it. Can you see the same behaviour?
    – Alx
    Commented Jul 28, 2014 at 8:42
  • Formatting your date before make it working for me : $scope.time = $filter("date")(new Date(), 'HH:mm'); jsfiddle.net/U3pVM/10464
    – JulCh
    Commented Nov 14, 2014 at 14:55
  • 1
    @JulCh your solution works well until version 1.4.5 in which it is broken
    – heroin
    Commented Feb 23, 2016 at 12:19
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();
0

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

0

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/

0

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.