Migrating Datepickers from Semantic UI to Bootstrap

In this document we'll be using SUI for ng2-semantic-ui and Bootstrap for ng-bootstrap. `

Support

In order to use the ngbDatePicker you need to declare the provider in app.module.ts.

import { NgbDateAdapter, NgbDateNativeUTCAdapter } from '@ng-bootstrap/ng-bootstrap';

... 

providers: [
    ...,
    {provide: NgbDateAdapter, useClass: NgbDateNativeUTCAdapter}
  ],

Migration

SUI date pickers follow this structure:

<input suiDatepicker
       id="endDatePicker"
       [(ngModel)]="endDate"
       [pickerMode]="'date'"
       [pickerPlacement] = "left"
       (pickerSelectedDateChange)="onEndDateChange()"
       [pickerFirstDayOfWeek]="1"
       [pickerUseNativeOnMobile]="false">

Bootstrap templates follow this structure instead:

<input ngbDatepicker
     placeholder="YYYY-MM-DD"
     #endDP="ngbDatepicker"
     [(ngModel)]="endDate"
     (click)="endDP.toggle()"
     (ngModelChange)="onEndDateChange()">

Notes

• The Bootstrap version must have a # tag (#endDP un the example), to be referenced by the (click) attribute.
  Obviously, the tag value should be unique within the component.

• SUI [pickerPlacement] translates to Bootstrap placement. However, I am not sure how the SUI configuration works, whereas the Bootstrap version is straightforward.

• The Bootstrap date picker is less configurable than its SUI counterpart, so not all options have a Bootstrap equivalent; see the SUI and Bootstrap date picker documentation for more info.