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
}
};
|
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..
|
