Calendar.js - Example - DatePicker

This is an example of using Calendar.js as a DatePicker control.

Download Now

v2.10.13 - 27th Feb 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}" } } } );