Simple angularjs date d'entrée

Si vous voulez remplir le champ avec une valeur initiale, alors la liste suivante sera le travail

//Controller:
$scope.myDate = new Date('2014-03-08T00:00:00');

//HTML:
<input type="date" ng-init="model=(myDate | date:'yyyy-MM-dd')" ng-model="model" />

Cependant, je recommande fortement la création d'un champ de date personnalisé directive.

Personnalisé champ de saisie de la directive offre les avantages suivants:

1. Les deux sens de la liaison entre le modèle et la vue.
   Par exemple, lorsque vous saisissez une date valide dans le champ de saisie, il sera automatiquement attribuer un javascript date pour le modèle; et lorsque vous attribuez un javascript valide date que le modèle, il sera automatiquement format dans le champ de texte.
2. Formulaire en charge de la validation. Lorsque vous entrez une date non valide, vous pouvez définir un $indicateur d'erreur, qui peut être utilisé à votre avis, les liaisons (c'est à dire l'affichage d'un message d'erreur). Définition d'un indicateur d'erreur sera également mis en form.$valid de faux, de sorte que vous pouvez conditionnellement soumettre le formulaire au serveur.

Il y a trois choses de base à considérer lors de la mise en œuvre d'une date personnalisée directive:

1. Un parser qui va analyser le texte d'entrée et de retourner le modèle
   (dans ce cas, un javascript date).
2. Un formateur qui va formater le modèle et l'afficher dans le champ de texte.
3. Réglage d'une option de validation de l'indicateur qui peut être utilisé dans l'INTERFACE utilisateur
   pour coutume de validation de formulaire.

Date De La Directive:

myApp.directive('dateField', function($filter) {
  return {
      require: 'ngModel',
      link: function(scope, element, attrs, ngModelController) {
           ngModelController.$parsers.push(function(data) {

              //View -> Model
              var date = Date.parseExact(data,'yyyy-MM-dd');

              //if the date field is not a valid date 
              //then set a 'date' error flag by calling $setValidity
              ngModelController.$setValidity('date', date!=null);
              return date == null ? undefined : date;
           });
           ngModelController.$formatters.push(function(data) {
              //Model -> View
              return $filter('date')(data, "yyyy-MM-dd");
           });    
       }
    }
});

Remarque: Pour l'analyse de dates, de cette directive utilise Date.js (une bibliothèque externe).

CSS:

.error {
  color:red;
}
.error-border {
  border: solid 2px red;
}

HTML:

<form name="myForm">
     <input ng-class="{'error-border': myForm.myDate.$error.date}" type="date"
            name="myDate" ng-model="myDate" date-field />
              <span ng-show="myForm.myDate.$error.date" class="error">
                  Please enter a valid date!!!
              </span>             
         <br /> Raw Date: {{myDate}} 
         <br /> Formatted Nicely: {{ myDate | date:'yyyy, MMMM dd'}}    
         <br /> Is Valid Date? {{ !myForm.myDate.$error.date}}
         <br /> Is Form Valid? {{ myForm.$valid }}
</form>

Contrôleur:

myApp.controller('ctrl', function($scope) {
    $scope.myDate = new Date('2014-03-08T00:00:00');
});

Démo JS Fiddle avec Date.js

Démo JS Fiddle avec Moment.js

OriginalL'auteur pixelbits