How to use datepicker popup in angular 2

Question

I want to use date-picker popup in input control using angular 2, when do blur on input control, then date-picker pop should come like bootstrap datepicker, I want to do it in angular 2, please suggest me any reference of date-picker of Angular 2.

Answer 1

I created my own datepicker-popup based on the ng2-bootstrap datepicker.

HTML

<my-datepicker [dateModel]="endDate" [label]="'Startdatum'" ></my-datepicker>

Angular2-Component in TypeScript:

import {Component, Input, Output, EventEmitter} from '@angular/core';
import {DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/components/datepicker';

@Component({
    selector: 'my-datepicker',
    directives: [DATEPICKER_DIRECTIVES],
    template: `
      <label>{{label}}</label>
      <input [(ngModel)]="dateModel" class="form-control"     (focus)="showPopup()" />
      <datepicker class="popup" *ngIf="showDatepicker" [(ngModel)]="dateModel" [showWeeks]="true" (ngModelChange)="hidePopup($event)" ></datepicker>
  `,
    styles: [`
    .popup {
      position: absolute;
      background-color: #fff;
      border-radius: 3px;
      border: 1px solid #ddd;
      height: 251px;
    }
  `],
})
export class IsdDatepickerComponent {
    @Input()
    dateModel: Date;
    @Input()
    label: string;
    @Output()
    dateModelChange: EventEmitter<string> = new EventEmitter();
    private showDatepicker: boolean = false;

    showPopup() {
        this.showDatepicker = true;
    }

    hidePopup(event) {
        this.showDatepicker = false;
        this.dateModel = event;
        this.dateModelChange.emit(event)
    }
}

Answer 2

Check out this date picker, it is highly configurable and its only dependency is moment.
https://github.com/vlio20/ng2-date-picker

Answer 3

Just use selectionDone inplace of ngModelChange event. I used in my code:

    import {Component, Input, Output, EventEmitter} from '@angular/core';
import {DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/components/datepicker';

@Component({
    selector: 'my-datepicker',
    directives: [DATEPICKER_DIRECTIVES],
    template: `
      <label>{{label}}</label>
      <input [(ngModel)]="dateModel" class="form-control"     (focus)="showPopup()" />
      <datepicker class="popup" *ngIf="showDatepicker" [(ngModel)]="dateModel" [showWeeks]="true" (selectionDone)="hidePopup($event)" ></datepicker>
  `,
    styles: [`
    .popup {
      position: absolute;
      background-color: #fff;
      border-radius: 3px;
      border: 1px solid #ddd;
      height: 251px;
    }
  `],
})
export class IsdDatepickerComponent {
    @Input()
    dateModel: Date;
    @Input()
    label: string;
    @Output()
    dateModelChange: EventEmitter<string> = new EventEmitter();
    private showDatepicker: boolean = false;

    showPopup() {
        this.showDatepicker = true;
    }

    hidePopup(event) {
        this.showDatepicker = false;
        this.dateModel = event;
        this.dateModelChange.emit(event)
    }
}

Answer 4

There is a new, excellent implementation of datepicker for Angular 2 based on Bootstrap 4: https://ng-bootstrap.github.io/#/components/datepicker.

It is a fully native widget with forms integration and very flexible cusomization options.