I need to initialize the input date to a datetime in specific format. How should I do it.
Currently I am using:
<input type="datetime-local" ng-model="myDate" ng-init="myDate = '2015-10-03T03:42:00.000+0000'"/>
but it gives an error:
Error: [ngModel:datefmt] Expected `2015-10-03T03:42:00.000+0000` to be
a date
I need to initialize the input date to a datetime in specific format. How should I do it.
Currently I am using:
<input type="datetime-local" ng-model="myDate" ng-init="myDate = '2015-10-03T03:42:00.000+0000'"/>
but it gives an error:
Error: [ngModel:datefmt] Expected `2015-10-03T03:42:00.000+0000` to be
a date
- 1 you need to parse the date and initialise – CodingNinja Commented Sep 24, 2015 at 13:07
2 Answers
Reset to default 3You have to write a function for converting your date string to a valid date:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/angularjs/1.4.6/angular.min.js"> </script>
<script type="text/javascript">
(function () {
'use strict';
var app = angular.module( 'app', [] );
app
.controller( 'AppController', ['$scope', function( $scope ) {
console.log( $scope.myDate );
$scope.parseDate = function ( date ) {
return new Date( Date.parse( date ) );
}
}]);
})();
</script>
</head>
<body ng-app="app">
<div ng-controller="AppController">
<input type="datetime-local" ng-model="myDate" ng-init="myDate = parseDate('2015-10-03T03:42:00.000+0000')"/>
</div>
</body>
</html>
codepen: http://codepen.io/anon/pen/MajGaj
Its because that is not a valid date according to Angular. Check out the doc on input[date] for their note on date validation.
And here the description of about the error.Basically it is because it cant validate 'myDate' as date and its getting it as string.
The issue is there is no Date() in scope, so bAsically rewriting Date as method:
$scope.Date = function(arg){
return new Date(arg);
};
And then you can call it from ng-init .
Below is the sample code I tried to test it
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-datetimelocal-input-directive-production</title>
<script src="//ajax.googleapis./ajax/libs/angularjs/1.5.0-beta.0/angular.min.js"></script>
</head>
<body ng-app="dateExample">
<script>
angular.module('dateExample', [])
.controller('DateController', ['$scope', function($scope) {
$scope.example = {
value: new Date(2010, 11, 28, 14, 57),
myDate: new Date(2010, 11, 28, 14, 57)
};
$scope.Date = function(arg){
return new Date(arg);
};
}]);
</script>
<form name="myForm" ng-controller="DateController as dateCtrl">
<label for="exampleInput">Pick a date between in 2013:</label>
<input type="datetime-local" id="exampleInput" name="input" ng-model="example.myDate"
ng-init="example.myDate = Date('Tue Feb 18 2013 00:00:00 GMT+0200 (CEST)')"
placeholder="yyyy-MM-ddTHH:mm:ss" min="2001-01-01T00:00:00" max="2013-12-31T00:00:00" required />
<div role="alert">
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.datetimelocal">
Not a valid date!</span>
</div>
<tt>value = {{example.value | date: "yyyy-MM-ddTHH:mm:ss"}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>
</body>
</html>