title: Initialize input populated by ng-bootstrap datepicker to blank
body: <p>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 <code>getDate</code> function gets in the way of that, I'm just not sure how to change it to allow that.</p>
  
  <p>Screenshot (datepicker opens with click of the button to the right of each input, one per input):
  <a href="https://i.stack.imgur.com/X936b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X936b.png" alt="enter image description here"></a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form class="form-inline"&gt;
    &lt;div&gt;
      &lt;div class="form-group" [ngClass]="{'has-error':!secondForm.controls['startDate'].valid &amp;&amp; secondForm.controls['startDate'].touched}"&gt;
        &lt;label&gt;Start Date:&lt;/label&gt;
        &lt;input style="width:250px" [value]="getDate('start')" class="form-control" type="text" [formControl]="secondForm.controls['startDate']"&gt;
      &lt;/div&gt;
      &lt;div style="display:inline-block"&gt;
        &lt;ngb-datepicker id="special" *ngIf="startCheck;" [(ngModel)]="startDate" (ngModelChange)="showDatePick(0)" [ngModelOptions]="{standalone: true}"&gt;&lt;/ngb-datepicker&gt;
      &lt;/div&gt;
      &lt;button type="button" class="btn icon-calendar" (click)="showDatePick(0)"&gt;&lt;/button&gt;
      &lt;div class="form-group" [ngClass]="{'has-error':!secondForm.controls['endDate'].valid &amp;&amp; secondForm.controls['endDate'].touched}"&gt;
        &lt;label&gt;End Date:&lt;/label&gt;
        &lt;input style="width:250px" [value]="getDate('end')" class="form-control" type="text" [formControl]="secondForm.controls['endDate']"&gt;
      &lt;/div&gt;
      &lt;div style="display:inline-block"&gt;
        &lt;ngb-datepicker id="special" *ngIf="endCheck;" [(ngModel)]="endDate" (ngModelChange)="showDatePick(1)" [ngModelOptions]="{standalone: true}"&gt;&lt;/ngb-datepicker&gt;
      &lt;/div&gt;
      &lt;button type="button" class="btn icon-calendar" (click)="showDatePick(1)"&gt;&lt;/button&gt;
      &lt;button type="submit" class="btn icon-search" [disabled]="!secondForm.valid"&gt;&lt;/button&gt;
      &lt;span [hidden]="!secondForm.hasError('endDateLessThanStartDate')" class="alert alert-danger first"&gt;End Date must be equal to or after Start Date&lt;/span&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Typescript:</p>
  
  <pre><code>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 &lt; startDateTimestamp) ? { endDateLessThanStartDate: true } : null;
    }
   }
  </code></pre>