Search code examples
javascriptjqueryangularjsdatetimeangular-filters

Placeholder Date with ANGULAR date.now() doesn't work in Chrome

In a web application I have an input type="date" and I'd like the user had the current date already default. So I used Angular because in pure js didn't work on phone (although in the browser worked). So this is the html part:

<body ng-app="app">    
<form ng-controller="DateController as dateCtrl"> 
<input type="date" id="date" value="{{value}}" ng-model="value" placeholder="dd-MM-yyyy">
</form>
</body>

and this is the AngularJS code:

var app = angular.module('app', []);
 app.controller('DateController', ['$scope', '$filter', function($scope, $filter) {
$scope.value = $filter('date')(Date.now(), "dd-MM-yyyy"); 
}]);

Both Firefox and Chrome give me an error in console. But in Firefox it works, and in Chrome it doesn't work. Chrome error:

The specified value '{{value}}' does not conform to the required format, 'yyyy-MM-dd'. angular.min-1.4.5.js:107 Error: [ngModel:datefmt] http://errors.angularjs.org/1.4.5/ngModel/datefmt?p0=08-02-2016 at Error (native) at file:///mypath/js/angular.min-1.4.5.js:6:416 at Array. (file:///mypath/js/angular.min-1.4.5.js:165:14) at Object. (file:///mypath/js/angular.min-1.4.5.js:264:75) at m.$get.m.$digest (file:///mypath/js/angular.min-1.4.5.js:129:480) at m.$get.m.$apply (file:///mypath/js/angular.min-1.4.5.js:133:113) at file:///mypath/js/angular.min-1.4.5.js:19:479 at Object.e [as invoke] (file:///mypath/js/angular.min-1.4.5.js:39:96) at d (file:///mypath/js/angular.min-1.4.5.js:19:400) at yc (file:///mypath/js/angular.min-1.4.5.js:20:179)(anonymous function) @ angular.min-1.4.5.js:107$get @ angular.min-1.4.5.js:80$get.m.$digest @ angular.min-1.4.5.js:130$get.m.$apply @ angular.min-1.4.5.js:133(anonymous function) @ angular.min-1.4.5.js:19e @ angular.min-1.4.5.js:39d @ angular.min-1.4.5.js:19yc @ angular.min-1.4.5.js:20Zd @ angular.min-1.4.5.js:19(anonymous function) @ angular.min-1.4.5.js:292m.Callbacks.j @ jquery.min.js:2m.Callbacks.k.fireWith @ jquery.min.js:2m.extend.ready @ jquery.min.js:2J @ jquery.min.js:2 jquery.min.js:5

The specified value '08-02-2016' does not conform to the required format, 'yyyy-MM-dd'.

Solution
    • First of all, some engines do not support the Date.now function. ( as described in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now) So you can just do with $scope.value= new Date(); or $scope.value= new Date(Date.now());
    • Second of all, the input type date is i think unformattable. It just takes the system default and applies that to the GUI. So you will just have to go with <input type="date" id="date" ng-model="value" placeholder="dd-MM-yyyy">