Angular.js和HTML5日期输入值 - 如何让Firefox来显示日期输入一个可读的日期值？ [英] Angular.js and HTML5 date input value -- how to get Firefox to show a readable date value in a date input?

问题描述

我有一个HTML5输入的日期，我想它的值设置为日期属性在默认情况下，我的模型的值。我不是太挑剔的格式化，因为铬似乎反正根据我的语言环境决定，对我来说，但理想的格式是一致的 DD / MM / YYYY 。

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' }}" />

这适用于Chrome罚款，我看到默认的情况如下：

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

的（我还是不太明白，为什么值有基于我语言环境给予YYYY-MM-DD ，如果Chrome仍然会对其进行格式化，但是这是一个不同的问题。）的

(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.)

我的问题是与Firefox不显示在我指定的方式，日期的价值。我觉得这做的输入绑定到日期模式，因为我可以指定pretty在值属性，我仍然会看到长日期字符串在默认情况下，输入：

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:

如果我删除 NG-模式=日期从输入标签，火狐很好地显示我给它的任何值。我没想到的是输入必定会实际上对它的默认值有任何影响的型号？

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?

我理解的日期输入没有得到普遍支持，但看到它应该依傍一个简单的文字输入，我不明白为什么它的价值将不仅仅是 2013-08 -05 ，由角的日期过滤器中指定。

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.

所以，我怎么火狐接受我的日期输入格式化值？

注意的编辑已经被用户完成后，我当然会进行验证，每个日期输入值转换成正确的日期目的。不知道这是相关的问题，但把它在那里以防万一，因为输入格式显然要一致的日期转换工作同样在所有浏览器。有问题的，当然，随着Chrome的决定对我来说，输入格式...

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

推荐答案

的问题是，<一个href=\"http://stackoverflow.com/questions/10610282/angularjs-value-attribute-on-an-input-text-box-is-ignored-when-there-is-a-ng-m\"><$c$c>value被忽略时， NG-模型是present 。

The problem is that value is ignored when ng-model is present.

火狐，它目前不支持键入=日期，将所有的值转换为字符串。既然你（正确地）想日期是一个真正的日期对象，而不是一个字符串，我认为最好的选择是创建另一个变量，例如 dateString ，然后链接两个变量：

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:

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

<大骨节病> 小提琴

实际的结构是仅用于演示目的。你会关闭创建自己的指令更好，特别是为了：

The actual structure is for demonstration purposes only. You'd be better off creating your own directive, especially in order to:

• 允许比 YYYY-MM-DD ，
等格式

• 可以使用<一个href=\"http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController#$formatters\"><$c$c>NgModelController#$formatters和<一个href=\"http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController#$parsers\"><$c$c>NgModelController#$parsers而非人工 dateString 变量（参见关于这一问题的文档 ）。

• 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).

请注意，我用 YYYY-MM-DD ，因为它是由JavaScript 日期对象。如果你想使用另外一个，你必须<一个href=\"http://stackoverflow.com/questions/476105/how-can-i-convert-string-to-datetime-with-format-specification-in-javascript\">make转换的自己。

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.

修改

下面是一种方法，使一个干净的指令：

Here is a way to make a clean directive:

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

<大骨节病> 小提琴

这是一个基本的指令，还是有很多需要改进的地方，例如：

That's a basic directive, there's still a lot of room for improvement, for example:

• 允许使用自定义格式，而不是 YYYY-MM-DD的，


• 检查用户输入的日期是正确的。

这篇关于Angular.js和HTML5日期输入值 - 如何让Firefox来显示日期输入一个可读的日期值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！