title: NgbDatePicker - How to bind longDate string to [ngModel]?
body: <p>I am trying to bind a date formatted as a "longDate" string to the [ngModel] input value in ngbDatePicker. For example, when the user picks a date, I'd like to display "January 15, 2017" instead of "2017-01-15". </p>
  
  <p>I understand that [ngModel] binds to an object of type NgbDateStruct only, and it seems to me that when I pass an object of type NgbDateStruct (let's call it selectedStartDate as shown in code below) to [ngModel] then NgbDateParserFormatter.format(selectedStartDate) gets called behind the scenes to display the date as "yyyy-MM-dd". So how can I bind a longDate format (i.e. January, 15, 2017) to [ngModel]? I've thought about overriding the format() method in NgbDateParserFormatter to display the date as I want it, but I am not sure how/if it would get called when I pass an NgbDateStruct object to bind to [ngModel]. </p>
  
  <p>In addition it would be nice to keep the NgbDateStruct parse/format methods as they come because I am passing Date data as "yyyy-MM-dd" strings to an API and these come in handy..  I am using ngbootstrap alpha.18. Any help appreciated thanks!</p>
  
  <pre><code>&lt;div class="form-group"&gt;From:
      &lt;div class="input-group"&gt;
          &lt;input class="form-control"
                 name="dp1" 
                 [ngModel]="selectedStartDate"
                 (ngModelChange)="selectStartDate($event)" 
                 ngbDatepicker 
                 [dayTemplate]="customDay" 
                 [markDisabled]="isDisabled" 
                 #d1="ngbDatepicker" /&gt;
          &lt;div class="input-group-addon" (click)="d1.toggle()"&gt;
              &lt;img src="img/calendar-icon.svg" style="width: 1.2rem; height:    1rem; cursor: pointer;" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>UPDATE:
  While the solution below works, for some reason I am unable to set a default date value. For example, from the component where my date picker resides, I am implementing OnInit and form within ngOnInit() I am setting my "selectedStartDate" binding field to a date of type NgbDateStruct. Then while in debug mode, I am able to see my selectedStartDate field get populated, and eventually MyNgbDateParserFormatter.format() gets called to format the date into a "longDate" string - however the date parameter within the format() method is null and an error is of course thrown... I can't figure out why it's getting there as null. Afterwards when I select a date then the "selectedDate" is displayed in "longDate" format as expected.</p>
  
  <p>The next issue I have noticed is that now every time I select a date, the method selectStartDate() isn't getting fired.</p>
  
  <p>Here is my module (I am providing this in a 'shared module' because that's where my component using the ngbdatepicker is declared)</p>
  
  <pre><code>    @NgModule({
      imports: [
          CommonModule,
          FormsModule,
          NgbModule,
          ChartsModule
      ],
      exports: [
          CommonModule,
          FormsModule,
          NgbModule,
          CrgbFilterComponent,
          DateFilterComponent,
          BarChartComponent,
          LineChartComponent,
          ChartsModule
      ],
      declarations: [
          CrgbFilterComponent,
          DateFilterComponent,
          BarChartComponent,
          LineChartComponent
      ],
      providers: [
          {
              provide: NgbDateParserFormatter,
              useFactory: () =&gt; { return new CustomNgbDateParserFormatter("longDate") }
          },
          DateFilterService,
          BarChartService,
          TableService,
          HelperMethodsService
      ]
  })
  export class SharedModule { }
  </code></pre>
  
  <p>Here is my component (the parts that matter):</p>
  
  <pre><code>    export class DateFilterComponent implements OnInit {
  
   selectedStartDate: NgbDateStruct;
   selectedEndDate: NgbDateStruct;
   @Output() startDateChanged: EventEmitter&lt;string&gt;;
   @Output() endDateChanged: EventEmitter&lt;string&gt;;
  
      constructor(private dateFilterService: DateFilterService) {
          this.startDateChanged = new EventEmitter&lt;string&gt;();
          this.endDateChanged = new EventEmitter&lt;string&gt;();
      }
  
   ngOnInit(): void {
          this.selectStartDate(this.dateFilterService.setDefaultStartDate());
          this.selectEndDate(this.dateFilterService.setDefaultEndDate());
      }
  
   selectStartDate(date: NgbDateStruct) {
          if (date != null) {
              this.selectedStartDate = date;
              let dateString = this.dateFilterService.toServerString(date);;
              this.startDateChanged.emit(dateString);
          }
      }
  
   selectEndDate(date: NgbDateStruct) {
          if (date != null) {
              this.selectedEndDate = date;
              let dateString = this.dateFilterService.toServerString(date);
              this.endDateChanged.emit(dateString);
          }
      }
  </code></pre>
  
  <p>Here is my date filter service:</p>
  
  <pre><code>    export class DateFilterService {
  
      constructor(private parserFormatter: NgbDateParserFormatter) { }
  
      setDefaultStartDate(): NgbDateStruct {
          // removing for simplicity, returning a NgbDateStruct object correctly.
      }
  
      setDefaultEndDate(): NgbDateStruct {
          // removing for simplicity, returning a NgbDateStruct object correctly.
      }
  
      toNgbDateStruct(date: string): NgbDateStruct {
          return this.parserFormatter.parse(date);
      }
  
      tolongDateString(date: NgbDateStruct): string {
          return this.parserFormatter.format(date);
      }
  
      toServerString(date: NgbDateStruct): string {
          return this.parserFormatter.formatForServer(date);
      }
  }
  </code></pre>
  
  <p>Thank you for any help in advance, thanks.</p>