Angular.js and HTML5 date input value -- how to get Firefox to show a readable date value in a date input?

The problem is that value is ignored when ng-model is present.

Firefox, which doesn't currently support type="date", will convert all the values to string. Since you (rightly) want date to be a real Date object and not a string, I think the best choice is to create another variable, for instance dateString, and then link the two variables:

<input type="date" ng-model="dateString" />

function MainCtrl($scope, dateFilter) {    $scope.date = new Date();    $scope.$watch('date', function (date)    {        $scope.dateString = dateFilter(date, 'yyyy-MM-dd');    });    $scope.$watch('dateString', function (dateString)    {        $scope.date = new Date(dateString);    });}

Fiddle

The actual structure is for demonstration purposes only. You'd be better off creating your own directive, especially in order to:

• allow formats other than yyyy-MM-dd,
• be able to use NgModelController#$formatters and NgModelController#$parsers rather than the artifical dateString variable (see the documentation on this subject).

Please notice that I've used yyyy-MM-dd, because it's a format directly supported by the JavaScript Date object. In case you want to use another one, you must make the conversion yourself.

EDIT

Here is a way to make a clean directive:

myModule.directive(    'dateInput',    function(dateFilter) {        return {            require: 'ngModel',            template: '<input type="date"></input>',            replace: true,            link: function(scope, elm, attrs, ngModelCtrl) {                ngModelCtrl.$formatters.unshift(function (modelValue) {                    return dateFilter(modelValue, 'yyyy-MM-dd');                });                ngModelCtrl.$parsers.unshift(function(viewValue) {                    return new Date(viewValue);                });            },        };});

Fiddle

That's a basic directive, there's still a lot of room for improvement, for example:

• allow the use of a custom format instead of yyyy-MM-dd,
• check that the date typed by the user is correct.

Why the value had to be given in yyyy-MM-dd?

According to the input type = date spec of HTML 5, the value has to be in the format yyyy-MM-dd since it takes the format of a valid full-date which is specified in RFC3339 as

full-date = date-fullyear "-" date-month "-" date-mday

There is nothing to do with Angularjs since the directive input doesn't support date type.

How do I get Firefox to accept my formatted value in the date input?

FF doesn't support date type of input for at least up to the version 24.0. You can get this info from here. So for right now, if you use input with type being date in FF, the text box takes whatever value you pass in.

My suggestion is you can use Angular-ui's Timepicker and don't use the HTML5 support for the date input.

You can use this, it works fine:

<input type="date" class="form1"    value="{{date | date:MM/dd/yyyy}}"  ng-model="date"   name="id"   validatedateformat   data-date-format="mm/dd/yyyy"  maxlength="10"   id="id"   calendar   maxdate="todays"  ng-click="openCalendar('id')">    <span class="input-group-addon">      <span class="glyphicon glyphicon-calendar" ng-click="openCalendar('id')"></span>    </span></input>