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

Question

I have an HTML5 date input and I would like its value to be set to the value of the date property in my model by default. I'm not too fussy about formatting since Chrome seems to decide that for me anyway based on my locale, but ideally the format would be consistently dd/MM/yyyy.

Fiddle

This is how I set up my input:

<input type="date" 
       ng-model="date" 
       value="{{ date | date: 'yyyy-MM-dd' }}" />

This works fine on Chrome, and I see the following by default:

Chrome displaying the formatted value of the date

(I still don't quite understand why the value had to be given in yyyy-MM-dd, if Chrome still formats it based on my locale, but that's a different question.)

My issue is with Firefox not showing the date's value in the way I've specified. I think this has to do with binding the input to the date model, because I can specify pretty much any string in the value attribute, and I will still see the long date string in the input by default:

Firefox showing datestring

If I remove ng-model="date" from the input tag, Firefox nicely displays any value I give it. I didn't think the model that an input was bound to actually had any effect on its default value?

I understand the date input isn't supported universally, but seeing as it's supposed to fall back on a simple text input, I don't see why its value won't simply be 2013-08-05, as specified by angular's date filter.

So, how do I get Firefox to accept my formatted value in the date input?

NOTE After the edits have been done by the user, I will of course perform validation and convert each date input value into a proper Date object. Not sure if this is relevant to the question, but putting it out there just in case, because the input formats would obviously need to be consistent for the date conversion to work the same in all browsers. Problematic, of course, with Chrome deciding the input format for me...

User · Answer

Check this fully functional directive for MEAN.JS (Angular.js, bootstrap, Express.js and MongoDb)

Based on @Blackhole ´s response, we just finished it to be used with mongodb and express.

It will allow you to save and load dates from a mongoose connector

Hope it Helps!!

angular.module('myApp')
.directive(
  'dateInput',
  function(dateFilter) {
    return {
      require: 'ngModel',
      template: '<input type="date" class="form-control"></input>',
      replace: true,
      link: function(scope, elm, attrs, ngModelCtrl) {
        ngModelCtrl.$formatters.unshift(function (modelValue) {
          return dateFilter(modelValue, 'yyyy-MM-dd');
        });

        ngModelCtrl.$parsers.push(function(modelValue){
           return angular.toJson(modelValue,true)
          .substring(1,angular.toJson(modelValue).length-1);
        })

      }
    };
  });

The JADE/HTML:

div(date-input, ng-model="modelDate")

User · Answer

In my case  I have solved this way    scope MyObject      get from database or other sources   scope MyObject Date   new Date  scope MyObject Date     and input type date is ok

User · Answer

I ve used ng-change    x000D   x000D  Date prototype addDays   function days    x000D    var dat   new Date this valueOf     x000D    dat setDate dat getDate     days   x000D    return dat  x000D    x000D   x000D  var app   angular module  myApp        x000D   x000D  app controller  DateController      rootScope     scope   x000D    function  rootScope   scope    x000D      function init     x000D         scope startDate   new Date    x000D         scope endDate    scope startDate addDays 14   x000D        x000D   x000D   x000D      function load     x000D        alert  scope startDate   x000D        alert  scope endDate   x000D        x000D   x000D      init    x000D         public methods x000D       scope load   load  x000D       scope setStart   function date    x000D         scope startDate   date  x000D         x000D       scope setEnd   function date    x000D         scope endDate   date  x000D         x000D   x000D      x000D      x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   lt div data-ng-controller  DateController  gt  x000D     lt label class  item-input  gt   lt span class  input-label  gt Start lt  span gt  x000D       lt input type  date  data-ng-model  startDate  ng-change  setStart startDate   required validatedateformat calendar gt  x000D     lt  label gt  x000D     lt label class  item-input  gt   lt span class  input-label  gt End lt  span gt  x000D       lt input type  date  data-ng-model  endDate  ng-change  setEnd endDate   required validatedateformat calendar gt  x000D     lt  label gt  x000D     lt button button  button  ng-disabled  planningForm  invalid  ng-click  load    class  button button-positive  gt  x000D      Run x000D     lt  button gt  x000D   lt  div  lt label class  item-input  gt   lt span class  input-label  gt Start lt  span gt  x000D   lt input type  date  data-ng-model  startDate  ng-change  setStart startDate   required validatedateformat calendar gt  x000D   lt  label gt  x000D   lt label class  item-input  gt   lt span class  input-label  gt End lt  span gt  x000D     lt input type  date  data-ng-model  endDate  ng-change  setEnd endDate   required validatedateformat calendar gt  x000D   lt  label gt  x000D   x000D   x000D

User · Answer

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

User · Answer

You can use this  it works fine      lt 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    gt       lt span class  input-group-addon  gt         lt span class  glyphicon glyphicon-calendar  ng-click  openCalendar  id    gt  lt  span gt       lt  span gt   lt  input gt

User · Answer

If using Angular Material Design  you can use the datepicker component there and this will work in Firefox  IE etc   https   material angularjs org latest demo datepicker  Fair warning though - personal experience is that there are problems with this  and seemingly it is being re-worked at present  See here   https   github com angular material issues 4856

User · Answer

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    lt input type  date  ng-model  dateString    gt    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    lt input type  date  gt  lt  input gt                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

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

The answer is

Examples related to javascript

Examples related to html

Examples related to forms

Examples related to date

Examples related to angularjs

Tags