web-dev-qa-db-de.com

Wie verwende ich die Datumsauswahl in Angular 2?

Ich habe viele Datumsauswahl in meiner angle2-App versucht, aber keine davon funktioniert. Obwohl die Datumsauswahl in der Ansicht angezeigt wird, der Wert des ausgewählten Datums jedoch nicht in der Variablen ngModel angezeigt wird.

30
Mubashir

Sie können einen Datepicker verwenden, indem Sie einfach den date-Wert in das type-Attribut Ihrer Eingaben einfügen:

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

In einigen Browsern wie Chrome und Microsoft Edge (nicht in Firefox) können Sie auf das Symbol in der Eingabe klicken, um die Datumsauswahl anzuzeigen. Symbole erscheinen nur, wenn sich die Maus über der Eingabe befindet.

Um etwas Browserübergreifendes zu haben, sollten Sie in Betracht ziehen, Angular2-kompatible Bibliotheken wie die folgenden zu verwenden:

48

PrimeNG bietet auch eine DatePicker-Komponente, eine Live-Demo.

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

5
Cagatay Civici

Wie von @thierry beantwortet, gibt es eine Option für uns 

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

für den Termin für unser Projekt. Aber ja, das ist nicht kompatibel mit der Multi-Browser-Plattform (wie Mozila) und es gibt viele Cross-Browser-Bibliotheken für dieselbe.

Ich habe zwei stilvolle Kalender-Datepicker erstellt, die das Bootflat-Design verwenden, auf das hier ebenfalls reagiert werden kann

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

 enter image description here

ich hoffe, dies gibt Ihnen mehr stilvolle und vielseitige Dateispicker.

2
Pardeep Jain

Ich bin nicht sicher, ob es hilft, aber wir wollten einen benutzerdefinierten Datepicker für unser Projekt entwickeln. Zu diesem Zeitpunkt konnten wir nicht viele Angular2 Datepicker finden und haben deshalb selbst einen einfachen geschrieben.

Es ist ein einfaches Datum, das das Datum auswählt, und Sie können auch Datum angeben, das Sie vorher und nachher deaktivieren möchten. Es verwendet den Ereignisemitter und legt das ausgewählte Datum in einem Textfeld fest. Es wird in npm veröffentlicht und ich arbeite auch daran, es zu verbessern.

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

Ich hoffe es hilft.

1
Bhuvana L

Angular 2 (TypeScript)

kann dies auch mit blur ereignis tun.

sehen Sie sich (blur)="newProjectModel.eEDate = eEDatePicker.value" bei einem Unschärfereignis genau an. Er weist der Modellvariablen #eEDatePicker die temporäre Eingangsvariable newProjectModel.eEDate zu.

<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 benutze diese Bootstrap-Bibliotheken:

bootstrap-datetimepicker.min.css

bootstrap-datetimepicker.min.js

1
Kaleem Ullah

Ich habe gerade mydatepicker package gefunden. Geben Sie einfach npm install mydatepicker --save ein und folgen Sie den Anweisungen hier Wenn Sie deren Benennungsstil nicht mögen, erstellen Sie einfach eine Wrapper-Komponente, die mit dem Date-Typ arbeitet

0
shakram02

Siehe ng2-boostrap datePicker scheint ngModel zu überschreiben. Während die Frage anders ist, lösten die Antworten darauf das Problem, das Sie für mich beschrieben haben.

Wenn Sie mit TypeScript arbeiten, müssen Sie dies dem HTML-Markup hinzufügen:

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

und in der Komponente ts-Datei müssen Sie importieren

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

und fügen Sie DATEPICKER_DIRECTIVES Ihrer Anbieterliste hinzu.

0
Herb F

erwägen Sie die Verwendung von angle-datepicker . Dies ist ein in hohem Maße konfigurierbarer Datumsauswähler, der für Angular-Anwendungen entwickelt wurde.

 enter image description here

0
vlio20

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

}
0
ali6p