Datepicker Basic

This is basic datepicker

Simple datepicker

Month: {{ date.month }}.{{ date.year }}

Model: {{ model | json }}

Disabled datepicker

This is Disabled datepicker

Datepicker Multiple months

This is datepicker Multiple months


Datepicker in a popup

This is datepicker with popup

Model: {{ model2 | json }}

Range Datepicker

Example of the range selection
{{ date.day }}
From: {{ fromDate | json }} 
To: {{ toDate | json }} 

Custom date adapter

These datepickers use custom Date adapter that lets you use your own model implementation. In this example we are converting from and to a JS native Date object


Model: {{ model1 | json }}
State: {{ c1.status }}


Model: {{ model11 | json }}
State: {{ c2.status }}

Custom day view

This datepicker uses a custom template to display days. All week-ends are displayed with an orange background.

{{ date.day }}

Footer template

This datepicker uses a footer template which is presented inside datepicker. Today and close buttons used as an example.