Angular 4 and 5 Datepicker Example

Angular 4 and Angular 5 Datepicker - How To Use Angular Datepicker?

The angular4-datepicker is compatible with Angular 2 and Angular 4 versions.  The angular4-datepicker is one of the newest components of Angular 4.

Overview of angular4-datepicker - The angular4-datepicker consists of three main parts i.e.
1.     Input
2.     Popup Trigger
3.     Calendar Popup

The angular4-datepicker looks like –
The Angular 4 date picker’s dateChanged callback function called when user select the date and this callback is mandatory for all and it also contains some optional callback like –
ü  inputFieldChanged
ü  calendarViewChanged

Now coming to Installation of angular4-datepicker - See the below follow the procedure for the same.
npm install angular4-datepickersave

Add MyDatePickerModule import to our @NgModule class and the Example looks like –
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyPickerApp } from './my-Picker-app';
import { MyDatePickerModule } from 'mydatepicker';

    imports:      [ BrowserModule, MyDatePickerModule ],
    declarations: [ MyPickerApp ],
    bootstrap:    [ MyPickerApp ]
export class MyPickerAppModule {}

The ngModel binding class and its looks like –
import { NgModule } from '@angular/core';
import {IMyDpOptions} from 'mydatepicker';

export class MyPickerApp {
    public myDatePickerOptions: IMyDpOptions = {
        dateFormat: '',
        //Other options..

    //nitialized to specific a date (016.08.2018).
    public model: any = { date: { year: 2018, month: 08, day: 16 } };

    constructor() { }

    // The dateChanged callback events.
    onDateChanged(event: IMyDateModel) {
        // event properties..

Add the following code in the components template looks like –
<form #myForm="ngForm" novalidate>
    <my-date-picker name="mydate" [options]="myDatePickerOptions"
                    [(ngModel)]="model" required></my-date-picker>

IF you are using dateChanged callback event and the example looks like –
<my-date-picker [options]="myDatePickerOptions"

The list of angular4-datepicker Options Attributes –
ü  height and width
ü  dayLabels and monthLabels
ü  dateFormat
ü  showTodayBtn
ü  todayBtnTxt
ü  firstDayOfWeek
ü  sunHighlight and satHighlight
ü  allowSelectionOnlyInCurrentMonth
ü  highlightDates
ü  markCurrentDay
ü  disableUntil
ü  enableDays and disableDays
ü  disableDateRanges
ü  disableWeekends and disableWeekdays
ü  disableHeaderButtons
ü  showSelectorArrow

Example for using the angular4-datepicker options attributes and its looks like –
myDatePickerOptions: IMyDpOptions = {
      todayBtnTxt: 'Today',
      dateFormat: '',
      firstDayOfWeek: 'mo',
      satHighlight: true,
      sunHighlight: true,
      inline: false,
      disableUntil: { year: 2018, month: 08, day: 16 }

ü  Stayed Informed What’s new In Angular 4 and Angular 5?
I hope you are enjoying with this post! Please share with you friends. Thank you!!

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog -
My Books - Book 1 and Book 2

Angular 4 and Angular 5 Datepicker - How To Use Angular Datepicker? Angular 4 and Angular 5 Datepicker - How To Use Angular Datepicker? Reviewed by Anil Singh on 10:16 PM Rating: (5) Powered by Blogger.