Comment utiliser date picker dans Angular 2?

PrimeNG provides also a DatePicker component, live demo;

http://www.primefaces.org/primeng/#/calendar

comme répondu par @thierry oui il y a une option pour nous d'utiliser

<input type="date" [(ngModel)]="company.birthdate"/>

pour obtenir date pour notre projet. mais oui, ce n'est pas compatible pour la plate-forme multi-navigateur (comme mozila) et il existe de nombreuses bibliothèques de navigateurs croisés pour le même.

j'ai fait deux élégants lecteurs de données calendrier en utilisant le thème Bootflat qui est responsive aussi se référer ici

https://github.com/MrPardeep/Angular2-DatePicker

espérons que cela vous donne plus élégant et multi navigateur de datepicker.

Je ne suis pas sûr que cela aide, mais nous avons voulu développer un pick-up personnalisé pour notre projet et nous n'avons pas pu trouver beaucoup de pick-up Angular2 à ce point et avons donc fini par en écrire un simple moi-même.

Sa simple qui sélectionne la date et vous pouvez également spécifier les dates que vous voulez désactiver avant et après. Il utilise l'émetteur d'événement et fixe la date sélectionnée dans un champ de texte. Il est publié dans mnp et je suis en train de l'améliorer.

https://www.npmjs.com/package/angular2-simple-datepicker

J'espère que ça aidera.

Angulaire 2 (Tapuscrit)

peut également le faire avec blur événement.

regardez attentivement (blur)="newProjectModel.eEDate = eEDatePicker.value" sur flou événement il attribue la variable d'entrée temporaire #eEDatePicker valeur à notre variable de modèle newProjectModel.eEDate

<form (ngSubmit)="onSubmit()" #newProjectForm="ngForm" >
  <div class="row">
    <div class="col-sm-4">
      <div class="form-group">
        <label for="end-date">Expected Finish Date</label>
        <div class='input-group date datetimepicker'>
          <input type='text' class="form-control" required [(ngModel)]="newProjectModel.eEDate" name="eEDate" #eEDate="ngModel" #eEDatePicker (blur)="newProjectModel.eEDate = eEDatePicker.value" />
          <span class="input-group-addon">
            <span class="fa fa-calendar"></span>
          </span>
        </div>
        <div [hidden]="eEDate.valid || eEDate.pristine" class="alert alert-danger">
          Expected Finish Date is required
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer" [hidden]="submitted">
    <button [hidden]="submitted" type="button" class="btn btn-red" data-dismiss="modal" >Cancel</button>
    <button [hidden]="submitted" type="submit" class="btn btn-green" [disabled]="!newProjectForm.form.valid">Save</button>
  </div>
  <div class="modal-footer" [hidden]="!submitted">
    <button [hidden]="!submitted" focus class="btn btn-green" data-dismiss="modal"  (click)="submitted=false">Ok</button>
  </div>
</form>

je suis à l'aide de ces bootstrap bibliothèques:

bootstrap-datetimepicker.min.css

bootstrap-datetimepicker.min.js

Voir ng2-bootstrap datePicker semble écraser ngModel , alors que la question est différente, les réponses à il a résolu le problème que vous avez décrit pour moi.

en supposant que vous utilisez typescript, vous devez ajouter ceci au markup html:

<datepicker [(ngModel)]="dateValue" [showWeeks]="false"</datepicker>

et dans le fichier TS, vous devrez importer

import {DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';

et ajoutez les directives DATEPICKER_DIRECTIVES à votre liste de fournisseurs.

C'est ma solution:

HTML

<input id="send_date"
       type="text"
       [(ngModel)]="this.dataModel.send_date"
       name="send_date"
       #send_date="ngModel"
       class="date-picker"
       data-date-format="dd-mm-yyyy">

.TS

//My data model has "send_date" property
dataModel: MyDataModel;

ngAfterViewInit() {

    //important point: You have to create a reference to this outer scope
    var that = this;

    $('#send_date').datepicker({
        //... your datepicker attributes
    }).change(function () {
        that.dataModel.send_date = $('#send_date').val();
    });

}

je viens de trouver mydatepicker package today il suffit de taper npm install mydatepicker --save et de suivre les instructions ici si vous n'aimez pas leur style de nommage, il suffit de créer un composant d'enrubannage qui fonctionne avec le type de Date

envisager d'utiliser Angular-datepicker , c'est un capteur de date très configurable construit pour les applications angulaires.