Calendar.js - Example - DatePicker
This is an example of using Calendar.js as a DatePicker control.
Download Now
v2.12.0 - 5th Jun 2024
Code
var calendarElement4 = document.getElementsByClassName( "calendar4" )[ 0 ];
var calendarInstance1 = new calendarJs( "calendar1", {
openInFullScreenMode: true,
startOfWeekDay: 6, // 6 = Sunday
views: {
fullMonth: {
addYearButtons: true,
titleBarDateFormat: "{mmm} {yyyy}"
},
datePicker: {
minimumDate: new Date(),
}
}
} );
var calendarInstance2 = new calendarJs( "calendar2", {
views: {
fullMonth: {
titleBarDateFormat: "{mmm} {yyyy}"
},
datePicker: {
selectedDateFormat: "{dd}/{mm}/{yyyy}",
maximumDate: new Date(),
}
}
} );
var calendarInstance3 = new calendarJs( "calendar3", {
views: {
fullMonth: {
titleBarDateFormat: "{mmm} {yyyy}"
},
datePicker: {
selectedDateFormat: "{d}-{m}-{yy}"
}
}
} );
var calendarInstance4 = new calendarJs( calendarElement4, {
views: {
fullMonth: {
titleBarDateFormat: "{mmm} {yyyy}"
}
}
} );
var calendarInstance5 = new calendarJs( "calendar5", {
views: {
fullMonth: {
titleBarDateFormat: "{mmm} {yyyy}"
},
datePicker: {
selectedDateFormat: "{dddd} {d}{o} {mmmm}"
}
}
} );