ngular.js和HTML5日期输入值-如何让Firefox在日期输入中显示可读的日期值？

Question

我有一个HTML5日期输入，我希望它的值在默认情况下设置为我的模型中的日期属性的值。我对格式化不太在意，因为Chrome似乎根据我的区域设置来决定对我来说，但是理想的格式应该是一致的dd/MM/yyyy。

不停摆弄

这是我设置输入的方式：

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

这在Chrome上运行良好，默认情况下我看到以下内容：

（我仍然不太明白，如果Chrome仍然根据我的区域设置对其进行格式化，为什么必须在yyyy-MM-dd中给出该值，但这是另一个问题。）

我的问题是Firefox没有以我指定的方式显示日期值。我认为这与将输入绑定到date模型有关，因为我可以在value属性中指定几乎任何字符串，并且默认情况下，我仍然会在输入中看到长日期字符串：

如果我从输入标签中删除ng-model="date"，Firefox会很好地显示我给它的任何值。我不认为输入绑定的模型实际上对其默认值有任何影响？

我知道日期输入不是普遍支持的，但是鉴于它应该依赖于一个简单的文本输入，我不明白为什么它的值不能简单地为2013-08-05，正如角的日期过滤器所指定的。

那么，如何让Firefox接受日期输入中的格式化值呢？

注意：在用户完成编辑后，我当然会执行验证，并将每个日期输入值转换为适当的日期对象。不确定这是否与问题相关，但把它放在那里以防万一，因为输入格式显然需要保持一致，以便日期转换在所有浏览器中都能正常工作。有问题，当然，Chrome为我决定输入格式...

Answer 1

你可以用这个，它工作正常：

<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>

Answer 2

为什么值必须以yyyy-MM-dd给出？

根据HTML 5的输入类型=日期规范，该值必须采用yyyy-MM-dd格式，因为它采用RFC3339中指定的有效完整日期的格式

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

与Angularjs无关，因为指令输入不支持datetype。

如何让Firefox接受日期输入中的格式化值？

FF至少在24.0版本之前不支持date类型的输入。你可以从这里得到这些信息。所以现在，如果您在FF中使用类型为date的输入，文本框将接收您传入的任何值。

我的建议是，您可以使用AngularUI的时间选择器，而不使用HTML5支持的日期输入。

Answer 3

问题在于，当存在ng model时，value被忽略。

Firefox目前不支持type="date"，它将把所有的值转换为字符串。既然你（正确地）希望date是一个真正的Date对象，而不是一个字符串，我认为最好的选择是创建另一个变量，例如dateString，然后将两个变量链接起来：

<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);
    });
}

小提琴

实际结构仅用于演示目的。您最好创建自己的指令，尤其是为了：

• 允许除yyyy-MM-dd，

请注意，我使用了yyyy-MM-dd，因为它是JavaScriptDate对象直接支持的格式。如果您想使用另一个，您必须自己进行转换。

编辑

以下是一种制定清洁指令的方法：

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);
                });
            },
        };
});

小提琴

这是一个基本的指令，仍然有很大的改进空间，例如：

• 允许使用自定义格式而不是yyyy-MM-dd，