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

Question

我有一个HTML5日期输入,我希望默认情况下将其值设置为我的模型中的日期属性的值.我对格式化并不是太挑剔,因为Chrome似乎根据我的语言环境决定对我来说,但理想情况下格式会一致dd/MM/yyyy.

小提琴

这是我设置输入的方式:

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

这在Chrome上工作正常,默认情况下我会看到以下内容:

(我仍然不太明白为什么必须提供值yyyy-MM-dd,如果Chrome仍然根据我的语言环境对其进行格式化,但这是一个不同的问题.)

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

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

我理解普遍不支持日期输入,但看到它应该依赖于简单的文本输入,我不明白为什么它的值不会简单地2013-08-05由angular的日期过滤器指定.

那么,如何让Firefox在日期输入中接受我的格式化值？

---

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

Answer 1

问题是value当ng-model存在时被忽略.

目前不支持的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);
    });
}

Fiddle

实际结构仅用于演示目的.你最好创建自己的指令,尤其是为了:

• 允许格式以外的格式yyyy-MM-dd,
• 能够使用NgModelController#$formatters和NgModelController#$parsers,而不是人工dateString变量(见文档关于这个问题).

请注意我已经使用过yyyy-MM-dd,因为它是JavaScript Date对象直接支持的格式.如果您想使用另一个,您必须自己进行转换.

编辑

这是一种制作干净指令的方法:

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

这是一个基本指令,仍有很大的改进空间,例如:

• 允许使用自定义格式代替yyyy-MM-dd,
• 检查用户输入的日期是否正确.

Answer 2

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

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

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

与Angularjs无关,因为指令输入不支持date类型.

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

FF不支持date至少版本24.0的输入类型.您可以从这里获得此信息.所以现在,如果使用类型为dateFF的输入,文本框将采用您传入的任何值.

我的建议是你可以使用Angular-ui的Timepicker而不使用HTML5支持日期输入.