Wie verwende ich die Datumsauswahl in Angular 2?

In der Tat, können Sie ein datepicker, indem Sie einfach die date Wert in der type Attribut des inputs:

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

In einigen Browsern wie Chrome und Microsoft Rand (nicht im Firefox), klicken Sie auf das Symbol innerhalb des input-zur Anzeige der Datum-picker. Symbole werden nur angezeigt, wenn Sie mit der Maus über dem Eingang.

Etwas cross-Browser, sollten Sie erwägen, die Verwendung Angular2-konformen Bibliotheken, wie:

• https://github.com/kekeh/mydatepicker
• https://github.com/jkuri/ng2-datepicker

InformationsquelleAutor der Antwort Thierry Templier

Als beantwortet @thierry ja, es ist eine option für uns zu nutzen,

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

für erste Termin für unser Projekt. aber ja, das ist nicht kompatibel mit der multi-browser-Plattform (wie mozila) und es gibt viele cross-browser-Bibliothek für die gleichen.

Habe ich aus zwei stilvollen Kalender Datepickers mit Bootflat Thema, das responsive ist zu finden hier

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

hoffe, das gibt Ihnen mehr stilvollen und multi-browser-datepicker.

InformationsquelleAutor der Antwort Pardeep Jain

Winkel 2 (Typoskript)

können dies auch tun, mit blur Veranstaltung.

schauen Sie genau auf (blur)="newProjectModel.eEDate = eEDatePicker.value" auf blur-Ereignis zuweist, Eingang temporäre variable #eEDatePicker Wert auf unser Modell variable 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>

Ich bin mit diesen bootstrap-Bibliotheken:

bootstrap-datetimepicker.min.css

bootstrap-datetimepicker.min.js

InformationsquelleAutor der Antwort Kaleem Ullah

Dies ist meine Lösung:

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

}

InformationsquelleAutor der Antwort ali6p

erwägen Sie die Verwendung Winkel-datepickeres ist eine hochgradig konfigurierbare Datums-picker gebaut für Winkel-Anwendungen.

InformationsquelleAutor der Antwort vlio20