title: Angular.js and HTML5 date input value -- how to get Firefox to show a readable date value in a date input?
body: <p>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 <code>dd/MM/yyyy</code>.</p>
  
  <p><strong><a href="http://jsfiddle.net/Vq65z/5/" rel="noreferrer">Fiddle</a></strong></p>
  
  <p>This is how I set up my input:</p>
  
  <pre><code>&lt;input type="date" 
         ng-model="date" 
         value="{{ date | date: 'yyyy-MM-dd' }}" /&gt;
  </code></pre>
  
  <p>This works fine on Chrome, and I see the following by default:</p>
  
  <p><img src="https://i.stack.imgur.com/ZY7Qh.png" alt="Chrome displaying the formatted value of the date"></p>
  
  <p><em>(I still don't quite understand why the value had to be given in <code>yyyy-MM-dd</code>, if Chrome still formats it based on my locale, but that's a different question.)</em></p>
  
  <p>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 <code>date</code> model, because I can specify pretty much any string in the <code>value</code> attribute, and I will still see the long date string in the input by default:</p>
  
  <p><img src="https://i.stack.imgur.com/l6sK8.png" alt="Firefox showing datestring"></p>
  
  <p>If I remove <code>ng-model="date"</code> 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?</p>
  
  <p>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 <code>2013-08-05</code>, as specified by angular's date filter.</p>
  
  <p><strong>So, how do I get Firefox to accept my formatted value in the date input?</strong></p>
  
  <hr>
  
  <p><strong>NOTE</strong> After the edits have been done by the user, I will of course perform validation and convert each date input value into a proper <code>Date</code> 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...</p>