panagulis72 February 2016

Placeholder Date with ANGULAR 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">

and this is the AngularJS code:

var app = angular.module('app', []);
 app.controller('DateController', ['$scope', '$filter', function($scope, $filter) {
$scope.value = $filter('date')(, "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] 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(anonym


panwar February 2016

This error in coming due to format issue of date. you can do this by assigning date value to the scope variable like this: $scope.value = new Date ();


dendimiiii February 2016

  • First of all, some engines do not support the function. ( as described in So you can just do with $scope.value= new Date(); or $scope.value= new Date(;
  • 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">

vipin Bhandari February 2016

Don't use input type date because it will not work on firefox

Post Status

Asked in February 2016
Viewed 3,072 times
Voted 8
Answered 3 times


Leave an answer