How to add pop up date pickar using ngX-bootstrap?

Question

How to add datepickar using ngx-bootstrap? This project uses Angular2 typescript2 ngx-bootstrap. I am doing following things: In HTML :

<datepicker class="well well-sm main-calendar" [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="false" [dateDisabled]="dateDisabled"></datepicker>

In Module:

import { DatepickerModule } from 'ngx-bootstrap/datepicker';
@NgModule({
    imports: [
        DatepickerModule.forRoot() 
    ]});

Answer 1

The feature does not currently exist in the library. There is a discussion on it here, but nothing has come so far:

https://github.com/valor-software/ngx-bootstrap/issues/273

I created a workaround for it using the bootstrap dropdown with the datepicker. Here is the HTML (please note that MinDate and dateValue are both values inside my Component class):

<div class="dropdown" dropdown #datepickerDropdown="bs-dropdown" [autoClose]="false">
  <div class="input-group" dropdownToggle>
    <input type="text" disabled="disabled" class="form-control" [value]="dateValue | date:'shortDate'" />
    <div class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </div>
  </div>
  <div *dropdownMenu class="dropdown-menu dropdown-date">
    <datepicker [(ngModel)]="dateValue" [minDate]="MinDate" [showWeeks]="false" (selectionDone)="closeDropdown()"></datepicker>
  </div>
</div>

Inside your module, make sure to include:

import { DatepickerModule } from 'ngx-bootstrap/datepicker';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';

and don't forget

@NgModule({
  declarations: [...],
  imports: [
    BsDropdownModule.forRoot(),
    DatepickerModule.forRoot(),
    ... (any other imports)
  ],
  providers: [...],
  bootstrap: [AppComponent]
])

In order to auto-close the dropdown on date selection, I didn't want it to autoclose when clicking in case the user wanted to change months. Therefore we had to use the selectionDate event. To create the function properly, we'll need to pull this into the Component. You will need to include the following imports in the Component:

import { ViewChild, ... } from '@angular/core';
import { BsDropdownDirective } from 'ngx-bootstrap/dropdown';

You can then reference the dropdown inside the Component class by doing the following:

@ViewChild('datepickerDropdown') private datepickerDropdown: BsDropdownDirective;

closeDropdown() {
  this.datepickerDropdown.hide();
}

I hope I was able to help. This works for me, but I'm not sure if it will work for everybody else.