将ng-bootstrap datepicker填充的输入初始化为空白

Question

I have two inputs, each populated by their own ng-bootstrap datepicker that pops up when I click a button. The input populates properly when you choose a new date, but my problem is if I want to initialize the inputs to null or simply another value. I know my getDate function gets in the way of that, I'm just not sure how to change it to allow that.

Screenshot (datepicker opens with click of the button to the right of each input, one per input):

HTML:

<form class="form-inline">
  <div>
    <div class="form-group" [ngClass]="{'has-error':!secondForm.controls['startDate'].valid && secondForm.controls['startDate'].touched}">
      <label>Start Date:</label>
      <input style="width:250px" [value]="getDate('start')" class="form-control" type="text" [formControl]="secondForm.controls['startDate']">
    </div>
    <div style="display:inline-block">
      <ngb-datepicker id="special" *ngIf="startCheck;" [(ngModel)]="startDate" (ngModelChange)="showDatePick(0)" [ngModelOptions]="{standalone: true}"></ngb-datepicker>
    </div>
    <button type="button" class="btn icon-calendar" (click)="showDatePick(0)"></button>
    <div class="form-group" [ngClass]="{'has-error':!secondForm.controls['endDate'].valid && secondForm.controls['endDate'].touched}">
      <label>End Date:</label>
      <input style="width:250px" [value]="getDate('end')" class="form-control" type="text" [formControl]="secondForm.controls['endDate']">
    </div>
    <div style="display:inline-block">
      <ngb-datepicker id="special" *ngIf="endCheck;" [(ngModel)]="endDate" (ngModelChange)="showDatePick(1)" [ngModelOptions]="{standalone: true}"></ngb-datepicker>
    </div>
    <button type="button" class="btn icon-calendar" (click)="showDatePick(1)"></button>
    <button type="submit" class="btn icon-search" [disabled]="!secondForm.valid"></button>
    <span [hidden]="!secondForm.hasError('endDateLessThanStartDate')" class="alert alert-danger first">End Date must be equal to or after Start Date</span>
  </div>
</form>

Typescript:

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
import {DatePipe} from "@angular/common";

@Component({
  selector: 'calendar-pick',
  styleUrls: ['../app.component.css'],
  templateUrl: './calendarpick.component.html',
  providers: [DatePipe]
})

export class CalendarPickComponent {
  public dt: NgbDateStruct;
  public dt2: NgbDateStruct;
  public startCheck: boolean = false;
  public endCheck: boolean = false;
  secondForm : FormGroup;

  public constructor(fb: FormBuilder, private datePipe: DatePipe) {
    this.secondForm = fb.group({
    'startDate' : [null, Validators.required],
    'endDate' : [null, Validators.required]
    }, {validator: this.endDateAfterOrEqualValidator})
  }

  public getDate(dateName: string) {
    let workingDateName = dateName + 'Date';
    let timestamp = this[workingDateName] != null ? new Date(this[workingDateName].year, this[workingDateName].month-1, this[workingDateName].day).getTime() : new Date().getTime();
    this.secondForm.controls[dateName + 'Date'].setValue(this.datePipe.transform(timestamp, 'MM/dd/yyyy'));
  }

  public showDatePick(selector):void {
    if(selector === 0) {
      this.startCheck = !this.startCheck;
    } else {
      this.endCheck = !this.endCheck;
    }
  }

  endDateAfterOrEqualValidator(formGroup): any {
    var startDateTimestamp, endDateTimestamp;
    for(var controlName in formGroup.controls) {
      if (controlName.indexOf("startDate") !== -1) {
        startDateTimestamp = Date.parse(formGroup.controls[controlName].value);
      }
      if (controlName.indexOf("endDate") !== -1) {
        endDateTimestamp = Date.parse(formGroup.controls[controlName].value);
      }
    }
    return (endDateTimestamp < startDateTimestamp) ? { endDateLessThanStartDate: true } : null;
  }
 }

Answer 1

Changed second line in getDate function to let timestamp = this[workingDateName] != null ? new Date(this[workingDateName].year, this[workingDateName].month - 1, this[workingDateName].day).getTime() : null; let timestamp = this[workingDateName] != null ? new Date(this[workingDateName].year, this[workingDateName].month - 1, this[workingDateName].day).getTime() : null;