v2.x.x
Add suggestions from v2.2.x Add events from v2.1.x
npm i angular-datepicker2
now @angular/core: ^8.2.14
https://angular-datepicker.com/
Set to imports app.module.ts import { AngularDatepicker2Module } from 'angular-datepicker2'
. Then you can use it by tag <angular-datepicker2></angular-datepicker2>
.
Props of AngularDatepicker2
:
// Array of selected dates.
[(selectedDates)]: Date[]
// Array custom definitions of days. Subscribable. See Day interface
[days]: Day[]
// Array custom definitions of suggestions. Suggestions for select dates
[suggest]: Suggest[]
// Date whould be render for default calendar .
shownDate: Date
// Alignment of days in a week. Default horizontal.
vertical: boolean
// Present mode of calendar. Quarter, semester or number of months. Default 1. Import from public-api or interfaces. Its enum
viewMode: ViewMode | number
// Start week day, default 0
weekStart: number
// Weekends, default [0,6], set Day.isWeekend true
weekends: number[] = [0, 6]
// Single, Multiple, Period. Import from public-api or interfaces. Its enum
selectMode: SelectMode
// Callback event when click on day
// its returns a Day object before change self state by click
(onDayClick)
set registerLocaleData(locale, "locale")
in your app.module.ts
. See https://angular.io/api/common/registerLocaleData
this.selectedDates = [
new Date(2020, 3, 7),
new Date(2020, 3, 9),
];
this.shownDate = new Date(2020, 3, 7);
this.suggest = [
{
title: 'Last two weeks',
selectMode: SelectMode.Period,
selectedDates: [
new Date(2020, 3, 1),
new Date(2020, 3, 12),
]
},
{
title: 'Last month',
selectMode: SelectMode.Period,
selectedDates: [
new Date(2020, 3, 1),
new Date(2020, 3, 30),
]
},
{
title: '1, 4 and 30',
selectMode: SelectMode.Multiple,
selectedDates: [
new Date(2020, 3, 1),
new Date(2020, 3, 4),
new Date(2020, 3, 30),
]
}
]
this.days = [
{
isDisabled: false,
isHovered: false,
isSelected: false,
isWeekEnd: true,
date: new Date(2020, 3, 21),
},
{
isDisabled: true,
isHovered: false,
isSelected: false,
isWeekEnd: true,
date: new Date(2020, 3, 26),
template: {
component:
{
componentClass: TestDayComponent,
props: [
{
propName: 'title',
type: 'input',
value: new Date(2020, 3, 26).getDate()
},
{
propName: 'callback2',
type: 'output',
value: (data) => {
alert('click custom day. See Day interface')
}
}
]
}
}
}
];
<angular-datepicker2 [shownDate]="shownDate" [suggest]="suggest" [days]="days" [(selectedDates)]="selectedDates" [selectMode]="'period'" [weekends]="[0,1]" [weekStart]="1" [viewMode]="'quarter'"></angular-datepicker2>