jsCalendar by Tournier Guillaume

Demo

Options Default Description
dayNames 2 Determines which type of day names are diplayed.
Values accepted: a number, 'short', 'full'.
If dayNames is a number, it return the name truncated by this number.
Elsewhere it return a 'short' of 'full' version of the name.
display true Show/hide the panel with the day on which the mouse is on.
displayPattern null Display the day on which the mouse is on with the specified pattern. The display option must be activated.
embedded false Determines if the calendar is a popup or if it's embedded. Add an 'embedded' class on the calendar.
endDate null Allow to select only dates before the endDate.
extraPanel false Show/hide the 'minutes + seconds + today' panel. This panel is displayed automatically if the pattern contains time info.
fixed false Set the panel type in light mode and accept only dates of the selected month.
minutesRange 5 Interval of the minutes in the minutes combobox.
monthNames full Determines which type of months names are diplayed. 'short' of 'full' version.
panel full Determines which type of panel is diplayed.
  • Full: previous & next buttons, combobox for month and year.
  • Normal: previous & next buttons, selected month and year are displayed in a label.
  • Light: selected month and year are displayed in a label.
pattern M/d/yyyy
Letter Component Presentation Examples
y Year Year 1996; 96
M Month in year Month July; Jul; 07
w Week in year Number 27
W Week in month Number 2
D Day in year Number 189
d Day in month Number 10
E Day in week Text Tuesday; Tue
a Am/pm marker Text PM
H Hour in day (0-23) Number 0
k Hour in day (1-24) Number 24
K Hour in am/pm (0-11) Number 0
h Hour in am/pm (1-12) Number 12
m Minute in hour Number 30
s Second in minute Number 55
S Millisecond Number 978
The hours & the minutes combobox are displayed only if time letters are present in the pattern.
popupBy null Determines which element can activate the calendar when you click on it. Cannot be used with embedded option or with bind.
readonly false Determines if the parent component (usually an input) is readonly or not.
startDate null Allow to select only dates after the startDate.
startYear current year - 1 Minimum year which can be selected. If used with startDate, startDate has priority.
strictMonth false Days of the previous and the next month are not displayed.
weeks true Show/hide the weeks number.
yearRange 10 Number of years which can be selected from startYear. If used with startDate & endDate, startDate & endDate have priority.

Demo