背景
在使用HTML5的日期输入类型时，不同浏览器对于输入日期格式的支持程度存在差异。具体来说，在Firefox浏览器中，如果使用Angular.js绑定数据到日期输入框，则默认情况下无法正确显示日期。
问题描述
在Firefox浏览器中，如果我们使用Angular.js绑定数据到日期输入框并设置了初始值，如下所示：
<input type="date" ng-model="myDate" value="2010-01-01">
在页面加载后，日期输入框会显示yyyy-mm-dd格式的日期字符串，而不是实际的日期值（例如：01/01/2010）。
解决方案
为了解决这个问题，我们需要做两件事：1) 将日期字符串转换成JavaScript的Date对象；2) 将JavaScript的Date对象转换成yyyy-mm-dd格式的字符串，并将其设置为输入框的显示值。
将日期字符串转换成JavaScript的Date对象
我们可以使用Angular.js的过滤器来完成此操作。首先，我们需要注册一个名为toDate的过滤器，它将日期字符串转换为JavaScript的Date对象。
angular.module('myApp').filter('toDate', function() {
return function(input) {
var parts = input.split('-');
return new Date(parts[0], parts[1]-1, parts[2]);
};
});然后，在HTML中，我们可以使用toDate过滤器将日期字符串转换为JavaScript的Date对象。
<input type="date" ng-model="myDate" value="{{ myDateString | toDate }}">将JavaScript的Date对象转换成yyyy-mm-dd格式的字符串
为了将JavaScript的Date对象转换为yyyy-mm-dd格式的字符串，我们可以使用Angular.js的date过滤器。
<input type="date" ng-model="myDate" value="{{ myDate | date:'yyyy-MM-dd' }}">示例代码
下面是一个完整的示例代码，演示了如何在Firefox浏览器中正确地显示日期值。
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
----------------- --- ----- ---- ----- -------------
-------
----- -----------------------
------ ----------- ----------------- --------- ------------ - ------ - ----------------- ----
------- ------------------------------------------------------------------------------
--------
----------------------- ---
----------------- ---------- -
------ --------------- -
--- ----- - -----------------
------ --- -------------- ----------- ----------
--
--
--------------------- ---------------- -
------------------- - -------------
---
---------
-------
-------结论
在Firefox浏览器中，使用Angular.js绑定数据到日期输入框时，需要注意日期格式的显示和转换。通过使用Angular.js的过滤器，我们可以将日期字符串转换为JavaScript的Date对象，并将其转换为yyyy-mm-dd格式的字符串，以正确显示日期值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25277