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-datepicker
–save
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
}
};