JSDateChooser :: F.A.Q & API :: just another JavaScript Calendar

F.A.Q.

What is JSDateChooser ?

JSDateChooser is a classes based component that would replace magic Flash 7 or greater DateChooser component.

Why JSDateChooser ?

I was looking for a simple, customizable, small and efficient Calendar ... I didn't find them. The DHTML / JavaScript Calendar, for example, should be a great, free and more powerfull alternative to this one but it's not what I was looking for.

Could I change colors or styles ?

JSDateChooser is CSS based, than you can change every CSS based part (look to Small and elegance JSDateChooser example page) .

What should I do with this Calendar ?

You can choose names of days, months, ranges of selectable days, disable some days of the week, disable date after and date before ... and do other things such multiple selections for a range of choosed days.

What is JSDateChooser browsers compatibility ?

JSDateChooser is DOM based, any innerHTML is used to create the calendar, then compatibility is for DOM compatible browsers. FireFox 1, 1.5, Opera 7, 8, 9, KDE 3.5 and Safari are compatible browsers. Internet Explorer 5, 5.5, 6 and Windows Internet Explorer 7 are compatible too. IE4 as KDE 3.4 are not perfectly compatible with DOM.

Why returned month is always wrong ?

It's not wrong, remember that the month of a generic Date object starts alway from 0 (January) to 11 (December). If you need to show human comprensible month number, just add 1 to returned date.getMonth() value. [ top menu ]

API :: DateChooser Methods

constructor

Any parameter to construct a JSDateChooser. 
var DC = new JSDateChooser();
[ top menu ]

addEventListener

DateChooser has some usefull events that should be used by developers. If you add one or more events listeners you will recieve informations for every called event. 
var evtlistener = new Object();
evtlistener.change = function(evt_obj) {
	var selectedDate = evt_obj.target.selectedDate;
	alert(selectedDate);
};
evtlistener.scroll = function(evt_obj) {
	alert(evt_obj.detail);
};
DC.addEventListener('change', evtlistener);
DC.addEventListener('scroll', evtlistener);
Events list Each events returns on listenr dedicated function an object that will has at least two proprieties, type and target. The target will be the DateChooser (you can use one listener with more thn one JSDateChooser) with its proprieties and the type is the event name. The type is the method, 'change' or 'scroll' and in this last case event has a third parameter, detail, wich contains type of scroll: 'prevYear', 'prevMonth', 'nextMonth', 'nextYear'. [ top menu ]

hide

Removes DateChooser from the document but doesn't delete DC object. 
DC.hide();
When you need to show DateChooser again, with redraw method, you'll see last selection or last action done on calendar before hiding. [ top menu ]

draw

This method shows calendar at least for the first time. Accept an id name of the dedicated div (or element) that will contain a DateChooser. 
onload = function() {
	var DC = new JSDateChooser();
	DC.draw("element-id");
}
[ top menu ]

getSelected

With this method you can read all selected dates as an array of Date objects. It's usefull when multipleSelection parameter is true, otherwise you should use selectedDate parameter to know last selected date. [ top menu ]

redraw

This method redraw calendar after every changes. Will show again after hide and updates after you changes parameters. If you want to change enabled status, for example, you need to do that before to call draw() for first time or after you've just call draw method using redraw(); 
va DC = new JSDateChooser();
DC.enabled = false;
DC.draw("calendar");
// calendar will be disabled



DC.enabled = true;
// calendar status now is 'enabled'
// but you need to redraw calendar
DC.redraw();
I think this method is better than an internal automatic interval listener that should be slow on old platforms. [ top menu ]

removeEventListener

This method removes a listener from the DateChooser object. 
DC.removeEventListener('scroll', evtlistener);
Rules for parameters are the same of addEventListener method. [ top menu ]

API :: DateChooser Proprieties

dayNames

Array with seven names of the days of the week. By default this is 
['S', 'M', 'T', 'W', 'T', 'F', 'S']
. Day names are correct if they are from Sunday to Saturday, then if you change them, start from Sunday and not, for example, from Monday. [ top menu ]

disabledDays

Array with disabled days. If you want to disable selection of all Saturday and Sunday, you should use [0,6] value. If you want to disable all Monday from calendar use [1] value. By default this value is an empty array []. Remember that values are from 0 to 6, with Sunday as first day and Saturday as last. [ top menu ]

disabledRanges

Array of objects or Date objects to disables a single day or a range of days. The following example defines an array with rangeStart and rangeEnd Date objects that disable the dates between June 7 and July 7: 
[{rangeStart: new Date(2006, 5, 7), rangeEnd: new Date(2006, 6, 7)}]
The following example disables all dates after November 7: 
[{rangeStart: new Date(2006, 10, 7)}]
The following example disables all dates before October 7: 
[{rangeStart: new Date(2006, 9, 7)}]
The following example disables only December 7: 
[new Date(2006, 11, 7)]
You can choose to disable several ranges using precedent rules. The following example disables December 7, April 10, dall dates before October, 7 2005 nd all dates between June 7 and July 7: 
[new Date(2006, 11, 7), new Date(2006, 3, 10), {rangeStart: new Date(2005, 9, 7)}, {rangeStart: new Date(2006, 5, 7), rangeEnd: new Date(2006, 6, 7)}]
[ top menu ]

displayedMonth

Displayed month number. You should force different month and redraw calendar. [ top menu ]

displayedYear

Displayed year number (YYYY). You should force different year and redraw calendar. [ top menu ]

enabled

Boolean value to enable/disable calendar date selection, true (enabled) by default. [ top menu ]

firstDayOfWeek

Integer unsigned value to choose different first day of the week. By default its value is 0, then calendar shows Sunday as first day. If you want to show Monday, its value should be 1. 6 value to start calendar from Saturday. [ top menu ]

monthNames

Array with 12 month names from January to December. You can change theese names starting always from Jan, to Dec. By default its value is: 
['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
[ top menu ]

multipleSelection

Boolean value to enable/disable calendar multiple date selection, false (disabled) by default. [ top menu ]

selectableRange

Object with one or two keys called rangeStart and rangeEnd. If you want to disable all dates before 2006-06-02 this parameter should be: 
{rangeStart: new Date(2006, 5, 2)}
and 2 day will be selectable. If you want to disable all dates after 2006-06-21 this parameter should be: 
{rangeEnd: new Date(2006, 5, 21)}
and 21 day will be selectable. If you want to enable a selectable range from 2006-06-02 and 2006-06-21 this parameter should be: 
{rangeStart: new Date(2006, 5, 2), rangeEnd: new Date(2006, 5, 21)}
with 2 of June and 21 of June selectable. By default its value is null, any range (all dates selectable) . [ top menu ]

selectedDate

Last selected date as a Date object. [ top menu ]

showToday

Boolean value to enable/disable the different today cell (and its CSS className). [ top menu ]

CSS :: DateChooser class names

List and description of all CSS class names [ top menu ]