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.

Answer 5

this is my implementation based on Christophs answer. i am using two way binding. component emits date as a string yyyy-mm-dd for saving on server. but it shows date inside component as a string dd-mm-yyyy . its convinient for cross browser displaying

 <datepicker-popup [(dateModel)]="serverDate"></datepicker-popup>

ts:

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

@Component({
selector: 'datepicker-popup',
template: `
  <input type="text" [(ngModel)]="_dateModel" class="form-control" (click)="openPopup()">
  <datepicker class="popup"
      [hidden]="!showPopup"
      [(ngModel)]="dateModelObj"
      [showWeeks]="true"
      (ngModelChange)="closePopup($event)" >
  </datepicker>


 `,
    styles: [`
    .popup {
      position: absolute;
      background-color: #fff;
      border-radius: 3px;
      border: 1px solid #ddd;
      height: 251px;
    }
  `],
})
export class DatepickerPopupComponent implements OnInit{
    @Input() dateModel: string;
    @Output()  dateModelChange: EventEmitter<string> = new EventEmitter();
    showPopup: boolean = false;
    _dateModel: string;
    dateModelObj: any;

ngOnInit() {
    this.dateModelObj = new Date(this.dateModel)
}

openPopup() {
    this.showPopup = true;
}

closePopup(event) {
    this.showPopup = false;
    this._dateModel = this.DDMMYYYY(event);
    this.dateModelChange.emit(this.YYYYMMDD(event))
}

YYYYMMDD(date):string {
    if (!date) return null;
    return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
};

DDMMYYYY(date):string {
    if (!date) return null;
    return date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
};

}

Answer 6

Try this, Pre requirments ng2-bootstrap

import date picker module in your app module

import { DatepickerModule } from 'ng2-bootstrap';

app-datepicker

<app-datepicker name="date" [(ngModel)]="driver.dateOfBirth" [placeholder]="'Date of Birth'" [dateFormat]="'dd-MM-yyyy'" ngDefaultControl required></app-datepicker>

datepicker.component.ts

import { Component, ViewChild, Input, Output, EventEmitter, ElementRef, Renderer } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
    selector: 'app-datepicker',
    templateUrl: './datepicker.component.html',
    styleUrls: ['./datepicker.component.css']
})

    export class DatepickerComponent {
        public inputHeight: String;

        @ViewChild('tasknote') input: ElementRef;
        @Input()
        ngModel: String;
        @Input()
        label: string;
        @Input()
        dateFormat: string;
        @Input()
        placeholder: string;
        @Output()
        ngModelChange: EventEmitter<string> = new EventEmitter();

        private showDatepicker: boolean = false;

        constructor(public element: ElementRef) {
        }

        showPopup(element) {
            this.inputHeight = this.element.nativeElement.querySelector('input').getBoundingClientRect().height + 'px';
            this.showDatepicker = true;
        }

        hidePopup(event) {
            this.showDatepicker = false;
            if (event) {
                var date = new DatePipe('en-us').transform(event, this.dateFormat || 'dd/MM/yyyy');
                this.ngModel = date;
                this.ngModelChange.emit(date);
            }
        }
    }

datepicker.component.html

<div style="position: relative;">
    <label [ngClass]="{'hide': !label}">{{label}}</label>
    <input #tasknote name="date-picker" [(ngModel)]="ngModel" (focus)="showPopup($elem)" placeholder="{{placeholder}}" required/>
    <datepicker class="popup" [ngClass]="{'hide': !showDatepicker}" [(ngModel)]="date" [showWeeks]="true" (selectionDone)="hidePopup($event)"
        [ngStyle]="{'bottom': inputHeight}"></datepicker>
</div>

datepicker.component.css

.popup {
      position: absolute;
      background-color: #fff;
      border-radius: 3px;
      border: 1px solid #ddd;
      height: 251px;
      color: #000;
      right: 0px;
    }
.hide {
     display:none;
}

Answer 7

You could use the ng2-boostrap project that provides a date picker component:

<datepicker [(ngModel)]="date" showWeeks="true"></datepicker>

See the project page:

• https://github.com/valor-software/ng2-bootstrap

See this question for the way to configure ng2-bootstrap (and the moment library) within the SystemJS configuration:

• integrate bootstrap module and ng2-select module to angular2 5min quickstart