Angular.js et valeur d'entrée de date HTML5: comment obtenir de Firefox qu'il affiche une valeur de date lisible dans une entrée de date?

Question

J'ai un HTML5 date d'entrée et je voudrais sa valeur à la valeur de la propriété de date dans mon modèle par défaut. Je ne suis pas trop pointilleux sur la mise en forme depuis Chrome semble décider que, pour moi en tout cas basé sur mes paramètres régionaux, mais, idéalement, le format sera invariablement dd/MM/yyyy.

Violon

C'est comment j'ai configuré mon entrée:

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

Cela fonctionne très bien sur Chrome, et je vois les suivantes par défaut:

(Je n'ai pas encore tout à fait comprendre pourquoi la valeur doit être donnée en yyyy-MM-dd, si Chrome encore les formats basés sur mon régionaux, mais c'est une autre question).

Mon problème est avec Firefox ne montrant pas la date de valeur de la façon que j'ai indiquée. Je pense que cela a à voir avec la liaison de l'entrée de l' date modèle, parce que je peux indiquer à peu près toute la chaîne de l' value d'attribut, et je vais encore voir le long de la chaîne de date de l'entrée par défaut:

Si je supprime ng-model="date" de la balise d'entrée, Firefox montre bien toute la valeur que je donne. Je ne pense pas que le modèle qu'une entrée a été lié à effectivement eu aucun effet sur sa valeur par défaut?

Je comprends la date d'entrée n'est pas pris universellement, mais vu que c'est censé se rabattre sur une simple saisie de texte, je ne vois pas pourquoi sa valeur ne sera pas simplement être 2013-08-05, comme spécifié par angulaire du filtre de date.

Alors, comment puis-je obtenir Firefox à accepter mon formaté valeur à la date d'entrée?

---

REMARQUE Après que les modifications aient été effectuées par l'utilisateur, je vais bien sûr effectuer la validation et la conversion de chaque jour de la valeur d'entrée dans un bon Date objet. Vous ne savez pas si c'est pertinent pour la question, mais de le mettre là-bas juste au cas où, parce que les formats d'entrée serait de toute évidence besoin d'être cohérent pour la date de conversion à fonctionner de la même dans tous les navigateurs. Problématique, bien sûr, avec le Chrome de décider du format d'entrée pour moi...

Answer 1

Le problème est qu' value est ignoré lors de l' ng-model est présent.

Firefox, qui ne prend actuellement en charge type="date", permettra de convertir toutes les valeurs de la chaîne. Puisque vous (à juste titre) souhaitez date être un réel Date objet et non pas une chaîne, je pense que le meilleur choix est de créer une autre variable, par exemple dateString, puis le lien entre les deux 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);
    });
}

Violon

La structure réelle est à des fins de démonstration uniquement. Vous feriez mieux de créer votre propre directive, en vue notamment:

• permettre à d'autres format que yyyy-MM-dd,
• être en mesure d'utiliser NgModelController#$formatters et NgModelController#$parsers plutôt que de l'artificiel dateString variable (voir la documentation sur ce sujet).

Veuillez notez que j'ai utilisé yyyy-MM-dd, parce que c'est un format pris en charge directement par le JavaScript Date objet. Dans le cas où vous souhaitez utiliser un autre, vous devez effectuer la conversion vous-même.

---

MODIFIER

Voici une façon de faire un nettoyage de la 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);
                });
            },
        };
});

Violon

C'est une directive de base, il y a encore beaucoup de travail à faire, par exemple:

• permettre l'utilisation d'un format personnalisé à la place de yyyy-MM-dd,
• vérifiez que la date saisie par l'utilisateur est correct.

Answer 2

Pourquoi la valeur doit être donnée au format aaaa-MM-jj?

Selon le type d'entrée = date de spec de HTML 5, la valeur doit être dans le format yyyy-MM-dd puisqu'il prend la forme d'un valide full-date qui est spécifié dans RFC3339 comme

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

Il n'y a rien à faire avec Angularjs depuis la directive d'entrée ne prend pas en charge date type.

Comment puis-je obtenir Firefox à accepter mon formaté valeur à la date d'entrée?

FF ne prend pas en charge date type d'entrée pour au moins jusqu'à la version 24.0. Vous pouvez obtenir cette information à partir d' ici. Donc, pour l'instant, si vous utilisez l'entrée avec type date FF, la zone de texte prend la valeur que vous avez passé.

Ma suggestion est que vous pouvez utiliser Angulaire de l'interface utilisateur de Timepicker et n'utilisez pas la prise en charge du HTML5 pour la date d'entrée.

Answer 3

You can use this, it works fine :
<input type="date" class="form1"  value="{{date | date:MM/dd/yyyy}}"
                                ng-model="date" name="id" validatedateformat date-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>`enter code here`