python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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';

@NgModule({
    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: 'dd.mm.yyyy',
        //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>
</form>

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

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: 'yyyy.mm.dd',
      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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions