Wie zu verwenden bootstrap-datepicker-input-Feld in angular2

Habe ich befolgt die unten genannten Schritte, und ich war in der Lage zu erreichen, bis auf das folgende Bild.

  1. Install nodejs version 6.9.1. Es kommt mit npm 3.10.8
  2. Dann folgte ich den folgenden Installations-Schritte.
  3. Wenn ich jetzt versuche zu nutzen <ngb-datepicker></ngb-datepicker> ich bin in der Lage zu sehen, diese Art von Bildschirm.
    Wie zu verwenden bootstrap-datepicker-input-Feld in angular2

Aber ich bin nicht in der Lage zu verstehen, wie input[ngbDatepicker]

Versuchte ich <input ngbDatepicker /> aber nur ein Textfeld angezeigt wird. Wenn ich mich darauf konzentriere, es zeigt nicht das Datum-picker.

Hier ist die link, die ich verwende.

Haben Sie Hinzugefügt bootstrap css in dein HTML ?
Ja. Nach dem hinzufügen dieses einfach design ändern. Aber nichts extra.

InformationsquelleAutor Partha Sarathi Ghosh | 2016-11-16

  1. 5

    Anzeigen datepicker im Fokus, die Sie verwenden können focus Ereignis input durch die Verwendung template Referenz wie folgt :

    <input ngbDatepicker #d="ngbDatepicker" (focus)="d.open()">

    Oder können Sie auslösen toggle Falle der datepicker auf den button klicken als pro Datepicker in a popup Beispiel Datepicker

    //Component
@Component({
  selector: 'ngbd-datepicker-popup',
  templateUrl: './datepicker-popup.html'
})
export class NgbdDatepickerPopup {
  model;
}

//HTML
<div class="input-group">
  <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
  <div class="input-group-addon" (click)="d.toggle()" >
    <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
  </div>
</div>
    Ich brauche, um das Datumsformat zu ändern. Wie mache ich das?
    Date format muss ein NgbDateParserFormatter pro ng-bootstrap.github.io/#/Komponenten/datepicker
    Noch bin ich nicht in der Lage, es zu benutzen. Sehr geringe Dokumentation. Bitte helfen Sie.
    Ich denke , für die Formatierung des Datums erstellen Sie die benutzerdefinierte Formatter-durch die Erweiterung NgbDateParserFormatter als pro github.com/ng-bootstrap/ng-bootstrap/blob/master/src/datepicker/... und brauchen, fügen Sie es als Anbieter in der Komponente, wie {provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter} als Beispiel Internationalization of datepickers auf der Seite ng-bootstrap.github.io/#/Komponenten/datepicker

    InformationsquelleAutor ranakrunal9

  2. 3

    Nach der Arbeit eine Menge und bekam den Vorschlag von ranakrunal9. Erreicht habe ich in dieser folgenden code-Basis. Es ist in Ordnung, die in allen Aspekten (Aber immer noch nur ein Problem habe ich, dass der datepicker wird nicht geschlossen, wenn ich Sie außerhalb der datepicker) Hier ist die plunker

    import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {NgbModule, NgbDateParserFormatter, NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
import { Component, OnInit, Input, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  imports: [
    NgbModule,
    BrowserModule,
    NgbDateParserFormatter
  ],
  selector: 'my-app',
  templateUrl: 'template.html'
})
export class App {


}

@NgModule({
  imports: [ BrowserModule, 
    NgbModule.forRoot()],
  providers : [
    {provide: NgbDateParserFormatter, useClass: forwardRef(() => CustomDateParserFormatter)}
  ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}



export class CustomDateParserFormatter extends NgbDateParserFormatter {
  parse(value: string): NgbDateStruct {
    if (value) {
      const dateParts = value.trim().split('/');
      /*
     Put your logic for parsing
      */
    }
    return null;
  }

  format(date: NgbDateStruct): string {
    return date ?
        date.day+'/'+date.month+'/'+date.year :
        '';
  }
}
    Haben Sie herausgefunden, wie, um es zu schließen auf Unschärfe? Ich habe versucht, die Bindung (blur) ausführen, d....schließen(). Das problem ist, "über den Kalender" zählt als Unschärfe zu und so wird der Kalender schließt sich, bevor ich zu wählen ein Datum.
    Ja, Dasselbe Problem habe ich auch gefunden, nicht gelöst ist es noch nicht. Wenn Sie können eine neue Frage, und verknüpfen Sie es hier denke auch ich, dass es hilfreich sein wird. Bitte erstellen Sie auch eine plunker.

    InformationsquelleAutor Partha Sarathi Ghosh

Schreibe einen Kommentar