Wie zu erkennen, bootstrap datetimepicker-change-events innerhalb angular2

Ich bin mit dem bootstrap datetimepicker im Winkel 2

https://eonasdan.github.io/bootstrap-datetimepicker/

In meinem template habe ich:

<div class='input-group date datepicker'>
         <input type='text' class="form-control" [(ngModel)]="date">
         <span class="input-group-addon">
         <span class="glyphicon glyphicon-calendar" (click)="getCalendar()"></span>
       </span>
   {{date}}
</div>

Das problem ist, wenn ich wählen Sie ein Datum auf dem Kalender klicken, es löst keine "change" - Ereignis aus (in anderen Worten, ngModel ist nicht ausgelöst). Wenn ich in das Textfeld eingeben, dann die {{date}} zeigt mir das Wert plus den text, den ich eingegeben haben.

Wie kann ich Veränderungen erkennen, die auf das Textfeld, wenn der Benutzer klickt auf ein Datum in der Auswahl zu ändern?

Vielleicht könnten Sie mit den datepicker von ng2-bootstrap?

InformationsquelleAutor Sireini | 2016-03-18

14

Das problem ist, dass Eckig nicht wissen, dass der Eingabe-Wert geändert hat, um zu aktualisieren ngModel. Eine andere seltsame Sache ist, dass der bootstrap-datetimepicker nicht auslösen des change-Ereignisses auf den Eingang - dies erfordert einige Abhilfe.

Siehe dieses Beispiel:
```
<div class='input-group date datepicker'>
  <input type='text' class="form-control" #datePicker [ngModel]="date" (blur)="date = datePicker.value">
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar" (click)="getCalendar()"></span>
  </span>

  {{date}}
</div>
```
Bemerken die Veränderungen:
- [ngModel]="date": wir brauchen nur one-way-data-binding (aus dem Modell), da Eckig weiß nicht, Wann die Eingabe der Wert geändert hat
- #datePicker: Ich habe eine lokale variable, um Zugriff auf dessen Wert
- (blur)="date = datePicker.value": auf verwischen wir aktualisieren das Modell
überprüfen Sie es heraus, sah nur Ihre Antwort:)
Ich bin froh, dass es dir geholfen. Es ist nicht perfekt Lösung als das Modell wird nur aktualisiert, wenn die Eingabe wird unscharf.
Weißt du auch, wie binden diese zu einem Objekt?
Ich verstehe es nicht. Können Sie bitte erläutern?
<select class="form-control" [(ngModel)]="Ausdruck.- Einschränkung"> <option *ngFor="#Einschränkung von Prototypen.Einschränkungen" [Wert]="constraint"> {{ Einschränkung }} </option> </select>

InformationsquelleAutor Cosmin Ababei
7

Dem problem, wie bereits von den anderen Antworten ist, dass ngModel ist nicht Kommissionierung bis die änderung durch die Drittanbieter-Bibliothek. ngModel verwendet zwei-Wege-Datenbindung. Im wesentlichen, wenn Sie sagen,

<div [(ngModel)]="date">

entspricht

<div [ngModel]="date" (ngModelChange)="date=$event">.

Was ich Tat, war, eine Richtlinie zu emittieren, die ngModelChange Ereignis wie folgt:
```
@Directive({
    selector: [datepicker],
    outputs: [
        "ngModelChange"
    ]
})
export class DatePickerDirective {
    //Emits changes to ngModel
    ngModelChange = new EventEmitter();
    el: JQuery;

    //Obtains the handle to the jQuery element
    constructor(el){
        this.el = jQuery(el.nativeElement);
    }

    ngOnInit() {
        this.el.datetimepicker({
            //Initialization options
        });

        this.el.on('dp.change', (event) => {
            var moment: Moment = event.date;

            //Emit new value
            this.ngModelChange.emit(date.format(/*However you want it formatted*/));
        });
    };

    ngOnDestroy() {
        //Clean up
        this.el.data('DateTimePicker').destroy();
    };
};
```
ElementRef nicht "auf". Es wurde wahrscheinlich entfernt, in rc5 oder so. Sollte dies nun this.el.nativeElement.onchange= function(event) { }? angular.io/docs/js/latest/api/core/index/ElementRef-class.html
sollte this.el.nativeElement.onchange= (event) => { } als das behebt this Fragen
Gut zu wissen. Änderte sich dies.el auf die JQuery-Typ (müssen JQuery-Testungen zu tun, es sei denn, du bist Fett genug, für die Verwendung von 'jeder'), die eine bessere Darstellung von diesem.el sowieso.
(ngModelChange) statt (ändern) war 'zactly, was ich brauchte.

InformationsquelleAutor Joe aka user3169887

Die Lösung gepostet von user3169887 funktionierte großartig für mich, bis ich wechselte von ein template-driven-form (verwendet ngModel) auf eine reaktive form.

Suchen weiter in das ursprüngliche problem, ich habe gelernt, dass Eckige ist das hören für den "input" - Veranstaltung, die diese datepicker-Bibliotheken nicht ausgelöst. Meine Lösung war, zu zwicken die Richtlinie, um das Feuer der "input" - event statt emittieren die ngModelChange Veranstaltung. Getestet habe ich diese Richtlinie mit einer template-driven form und eine reaktive form und beide Schienen zu funktionieren.

import { Directive, ElementRef, Renderer, Input, OnInit } from "@angular/core";

declare var $: any;

@Directive({
    selector: "[datepicker]"
})
export class DatePickerDirective implements OnInit {
    @Input("datepicker")
    private datepickerOptions: any = {};
    private $el: any;

    constructor(private el: ElementRef, private renderer: Renderer) {
        this.$el = $(el.nativeElement);
    }

    ngOnInit() {
        //Initialize the date picker
        this.$el.datepicker(this.datepickerOptions)
            //Angular is watching for the "input" event which is not fired when choosing
            //a date within the datepicker, so watch for the "changeDate" event and manually
            //fire the "input" event so that Angular picks up the change
            //See: angular/modules/@angular/forms/src/directives/default_value_accessor.ts
            .on("changeDate", (event) => {
                let inputEvent = new Event("input", { bubbles: true });
                this.renderer.invokeElementMethod(this.el.nativeElement, "dispatchEvent", [inputEvent]);
            });
    };

    ngOnDestroy() {
        this.$el.datepicker("destroy");
    };
};

Hinweis, dass ich mit einem anderen datepicker-Bibliothek, so bin ich empfangsbereit für die "Datum" - event und Ihre Bibliothek kann Feuer-ein anderes Ereignis wie "dp.ändern".

Hat Super funktioniert, die Anpassung der ui-DatePicker-mit 'onSelect'
viel besser als die akzeptierte Antwort
sieht besser aus... ich werde versuchen, diese

InformationsquelleAutor jaggedaz

1

Nicht sicher, ob das funktioniert, aber laut den docs die richtige Veranstaltung zu hören ist change
```
<div class='input-group date datepicker' (change)="date=$event">
```
<div class= "input-group-date datepicker' (ändern)="Datum=$Wert"> <input type= "text" class="form-control" [(ngModel)]="Datum"> {{Datum}} </div> so ist es nicht funktioniert..
Können Sie bitte versuchen <div class='input-group date datepicker' (change)="handleChange($value)"> und fügen Sie eine handleChange($event) { console.log(event); }. Ich hatte auch einen Fehler in meiner Antwort - aktualisiert. (ändern $value zu $event)
Das problem ist, dass bootstrap datetimepicker nicht auslösen des change-Ereignisses auf den Eingang. In der Tat, es ist ein benutzerdefiniertes Ereignis "dp.ändern" aber eckig kann nicht scheinen, um es zu fangen (dp.ändern).

InformationsquelleAutor Günter Zöchbauer

Versuchen ngModelChange statt change.

<input class="form-control" (ngModelChange)="changeDate($event)"
      [(ngModel)]="startRegistrationDate" ngbDatepicker #start="ngbDatepicker">

//to catch the event
changeDate(event: any) {
  console.log(event);
}

nur wenn Sie ngmodel, wird nicht funktionieren mit reaktiven form

InformationsquelleAutor Aniruddha Das

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Siehe dieses Beispiel: