ng-bootstrap DatePicker set startDate and minDate on trigger Angular 4

Question

So, I'm using ng-bootstrap DatePicker, and have two forms, startDate and endDate I need to be able to do 2 things with this:

• when render the "create page" put today's date on startDate, if render "edit page", put the date from the backend..
• when selected the startDate, trigger the minDate attribute to be the selected startDate

Here's how I'm trying to do(with hardcode now, not getting the data from the backend)

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>

also, if someone know how to do it, I want the popup display of the calendar to be on the direction of the top of the page, not the bottom...didn't find any attribute to set this.

Answer 1

You could do this without the property minDate, but if you need it, you can do the following. I have introduced a new variable dataToBeUsed (name appropriately) to be the variable we use, so take that in consideration in this example compared to your code.

First question, you wanted to check if this is Create or 'something else'. I prefer to do initial things in OnInit instead of constructor. You mentioned that you will get your data from backend if the viewType is not '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;
      })
  }    
}

you wanted to change the minDate when your start date changes. So let's make use of ngModelChange (rest omitted)

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

setMinDate method:

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

From your code, I have removed the variables

startDate, endDate, minEndDate

since I see no use for them. We can just refer to the same attributes in the dataToBeUsed object.

so for the second date-picker, where you want to disable dates that are before your startdate, we mark it as:

[minDate]="dataToBeUsed.minDate"

Here's a plunker for your reference: http://plnkr.co/edit/zfGUrMJkJzQXTBJ86OSs?p=preview