ng-Bootstrap-Datepicker gesetzt und startdate minDate auf Trigger Angular 4

Question

Also, ich bin ng-Bootstrap-Datepicker mit, und zwei Formen haben, und startdate endDate Ich muss in der Lage sein zu tun 2 Dinge mit diesem:

• wenn machen die „Seite erstellen“ das heutige Datum auf startdate setzen, wenn „Seite bearbeiten“ machen, setzen Sie das Datum aus dem Back-End ..
• wenn die startdate ausgewählt, löst der minDate das Attribut ausgewählt startdate
sein

Hier ist, wie ich versuche zu tun (mit hard jetzt, nicht die Daten aus dem Backend bekommen)

export class ProgramFormComponent { 
    startDate: NgbDateStruct; 
    endDate: NgbDateStruct; 
    minEndDate: NgbDateStruct; 

    programInput = { 
    'viewType' : 'Create', 
    'programTitle' : '', 
    'programDescription' : '', 
    'programOwner' : [ 
     '' 
     ], 
    'changepointID' : '', 
    'startDate' : this.startDate, 
    'endDate' : this.endDate, 
    'minDate' : this.minEndDate 
    } 

    programInputEdit = { 
    'viewType' : 'Edit', 
    'programTitle' : 'Test Title', 
    'programDescription' : 'Test Description', 
    'programOwner' : [ 
     'Test Owner 1', 
     'Test Owner 2', 
     'Test Owner 3', 
     ], 
    'changepointID' : 'ID', 
    'startDate' : this.startDate, 
    'endDate' : this.endDate, 
    'minDate' : this.minEndDate 
    } 

    constructor(private modalService: NgbModal) { 
    if (this.programInput['viewType'] === 'Create') { 
     this.selectToday(); 
    } else { 
     this.startDate = {year: 2017, month: 7, day: 1}; 
     this.endDate = {year: 2017, month: 12, day: 2}; 
    } 
    } 

    open(content) { 
    this.modalService.open(content, { windowClass: 'dark-modal' }); 
    } 

    selectToday() { 
    this.startDate = {year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate()}; 
    } 

    limitEndDate() { 
    this.minEndDate = this.startDate; 
    } 

<form> 
<div class="form-group"> 
      <label for="startDate" class="control-label">Start Date</label> 
      <div class="input-group"> 
       <input class="form-control" placeholder="yyyy-mm-dd" 
        name="startDate" [(ngModel)]="programInput.startDate" ngbDatepicker #s="ngbDatepicker" firstDayOfTheWeek=1 [startDate]="programInput.startDate"> 
       <div class="input-group-addon" (click)="s.toggle()" > 
        <i class="fa fa-calendar" aria-hidden="true"></i> 
       </div> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label for="startDate" class="control-label">End Date</label> 
      <div class="input-group"> 
       <input class="form-control" placeholder="yyyy-mm-dd" 
        name="startDate" [(ngModel)]="programInput.endDate" ngbDatepicker #e="ngbDatepicker" [minDate]="programInput.minEndDate"> 
       <div class="input-group-addon" (click)="e.toggle()" > 
        <i class="fa fa-calendar" aria-hidden="true"></i> 
       </div> 
      </div> 
     </div> 
</form> 

auch wissen, ob jemand, wie es zu tun, ich die Popup-Anzeige des Kalenders auf die Richtung der oben auf der Seite sein will, nicht der Boden ... hat kein Attribut gefunden, um dies zu setzen.

Answer 1

Sie könnten dies ohne die Eigenschaft minDate tun, aber wenn Sie es brauchen, können Sie Folgendes tun. Ich habe eine neue Variable dataToBeUsed (Name entsprechend) eingeführt, um die Variable zu sein, die wir verwenden, also nehmen Sie das in diesem Beispiel in Betracht, verglichen mit Ihrem Code.

Erste Frage, Sie wollten überprüfen, ob dies Create oder etwas anderes ist. Ich bevorzuge die ersten Dinge in OnInit statt Konstruktor zu tun. Sie erwähnten, dass Sie Ihre Daten aus Backend erhalten, wenn die viewType ist nicht 'Create', so ....

ngOnInit() { 
    if (this.programInput['viewType'] === 'Create') { 
    // remember objects are mutable 
    this.dataToBeUsed = this.programInput; 
    this.dataToBeUsed.startDate = {year: new Date().getFullYear(), month: new Date().getMonth() + 1, day: new Date().getDate()}; 
    } else { 
    this.getData() 
     .subscribe(data => { 
     this.dataToBeUsed = data; 
     }) 
    }  
} 

Sie die minDate, wenn Sie das Startdatum Änderungen ändern wollte. Lassen Sie uns also die Nutzung von ngModelChange machen (Rest entfällt)

<input (ngModelChange)="setMinDate($event)" [(ngModel)]="dataToBeUsed.startDate"> 

setMinDate Methode:

setMinDate(event) { 
    this.dataToBeUsed.minDate = event; 
} 

aus dem Code habe ich entfernt die Variablen

startDate, endDate, minEndDate 

da ich keine Verwendung für sie zu sehen . Wir können uns nur auf die gleichen Attribute im Objekt dataToBeUsed beziehen.

so für die zweite Datumsauswahl, in dem Sie Termin deaktivieren mögen, die vor Ihrem Startdatum ist, markieren wir es als:

[minDate]="dataToBeUsed.minDate" 

Hier ist ein Plunker für Ihre Referenz: http://plnkr.co/edit/zfGUrMJkJzQXTBJ86OSs?p=preview