Anguleux.JS et HTML5 valeur d'entrée de date - Comment faire pour que Firefox affiche une valeur de date lisible dans une entrée de date?

pourquoi la valeur devait-elle être indiquée dans les AAAA-MM-JJ?

selon le type d'entrée = Date spec de HTML 5, la valeur doit être dans le format yyyy-MM-dd car il prend le format 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 à voir avec Angularjs puisque la directive input ne support date type.

Comment faire pour que Firefox accepte ma valeur formatée dans la date saisie?

FF ne supporte pas le type d'entrée date pour au moins jusqu'à la version 24.0. Vous pouvez obtenir cette information de ici . Donc pour l'instant, si vous utilisez input avec le type date en FF, la zone de texte prend n'importe quelle valeur que vous passez.

Ma suggestion est que vous pouvez utiliser Angular-ui Timepicker et ne pas utiliser le support HTML5 pour l'entrée de date.

vous pouvez utiliser ceci, cela fonctionne très bien:

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

dans mon cas, j'ai résolu cette voie:

$scope.MyObject = // get from database or other sources;
$scope.MyObject.Date = new Date($scope.MyObject.Date);

et de saisie de type date est ok

j'ai utilisé ng-change:

Date.prototype.addDays = function(days) {
  var dat = new Date(this.valueOf());
  dat.setDate(dat.getDate() + days);
  return dat;
}

var app = angular.module('myApp', []);

app.controller('DateController', ['$rootScope', '$scope',
  function($rootScope, $scope) {
    function init() {
      $scope.startDate = new Date();
      $scope.endDate = $scope.startDate.addDays(14);
    }


    function load() {
      alert($scope.startDate);
      alert($scope.endDate);
    }

    init();
    // public methods
    $scope.load = load;
    $scope.setStart = function(date) {
      $scope.startDate = date;
    };
    $scope.setEnd = function(date) {
      $scope.endDate = date;
    };

  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-controller="DateController">
  <label class="item-input"> <span class="input-label">Start</span>
    <input type="date" data-ng-model="startDate" ng-change="setStart(startDate)" required validatedateformat calendar>
  </label>
  <label class="item-input"> <span class="input-label">End</span>
    <input type="date" data-ng-model="endDate" ng-change="setEnd(endDate)" required validatedateformat calendar>
  </label>
  <button button="button" ng-disabled="planningForm.$invalid" ng-click="load()" class="button button-positive">
    Run
  </button>
</div <label class="item-input"> <span class="input-label">Start</span>
<input type="date" data-ng-model="startDate" ng-change="setStart(startDate)" required validatedateformat calendar>
</label>
<label class="item-input"> <span class="input-label">End</span>
  <input type="date" data-ng-model="endDate" ng-change="setEnd(endDate)" required validatedateformat calendar>
</label>

vérifier cette directive entièrement fonctionnelle pour la moyenne.JS (Angular.js, bootstrap, Express.js et MongoDb)

basé sur la réponse de @Blackhole, nous venons de le finir pour être utilisé avec mongodb et express.

il vous permettra de sauvegarder et de charger des dates à partir d'un connecteur Mangoose

Espère que cela Aide!!

angular.module('myApp')
.directive(
  'dateInput',
  function(dateFilter) {
    return {
      require: 'ngModel',
      template: '<input type="date" class="form-control"></input>',
      replace: true,
      link: function(scope, elm, attrs, ngModelCtrl) {
        ngModelCtrl.$formatters.unshift(function (modelValue) {
          return dateFilter(modelValue, 'yyyy-MM-dd');
        });

        ngModelCtrl.$parsers.push(function(modelValue){
           return angular.toJson(modelValue,true)
          .substring(1,angular.toJson(modelValue).length-1);
        })

      }
    };
  });

The JADE / HTML:

div(date-input, ng-model="modelDate")

si vous utilisez la conception de matériaux angulaires, vous pouvez utiliser le composant datepicker là-bas et cela fonctionnera dans Firefox, C'est-à-dire etc

https://material.angularjs.org/latest/demo/datepicker

bon avertissement cependant - l'expérience personnelle est qu'il y a des problèmes avec cela, et apparemment il est retravaillé à l'heure actuelle. Voir ici:

https://github.com/angular/material/issues/4856