Angular-datepickr NPM

Angular-datepickr

Angular Datepicker Component

angular-datepickr is a datepicker component for Angular 2+

Demo

Desktop Desktop

Modal Modal

Installation

Required libraries: moment.js

Install angular-datepickr via npm

npm install angular-datepickr --save

Usage

import { AngularDatepickerModule } from 'angular-datepickr/dist';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        CommonModule,
        ReactiveFormsModule,
        FormsModule,
        AngularDatepickerModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

<jb-input-datepicker formControlName="date"></jb-input-datepicker>
<jb-text-datepicker formControlName="date2"></jb-text-datepicker>

Configuration

Global configuration

export const datepickerGlobalOptions: AngularDatepickerOptions = {
    todayString: 'DNES',
    modalMediaQuery: 'max-width: 550px',
    format: 'DD.MM.YYYY',
    viewFormat: 'DD.MM.YYYY',
    firstWeekdaySunday: false,
    todayButtonEnabled: true,
    todayHighlight: true,
    weekendHighlight: true,
    closeOnSelect: true
}
AngularDatepickerModule.forRoot(datepickerGlobalOptions)

Local configuration

<jb-input-datepicker formControlName="date" [options]="{todayHighlight:'false'}"></jb-input-datepicker>

Option	Description	Default
format: string	format for model value	'DD.MM.YYYY'
viewFormat: string	format for view	'DD.MM.YYYY'
firstWeekdaySunday: boolean	week in calendar starts with sunday	false;
todayString: string	text on the today button	TODAY
todayButtonEnabled: boolean	today button is shown	true
todayHighlight: boolean	today is highlighted	true
weekendHighlight: boolean	saturday and sunday is highlighted with color	true
modalMediaQuery: string	media query which will be matched to show calendar in modal	none