JavaScript Datepicker / Calendar Control
Download DatePicker v2.6
07-Apr-2011 [11KB, Min, Gzip]
<script type="text/javascript" src="datepicker-2.6.js"></script>

Note: Do not forget to include jQuery script.

Creating a DatePicker
<input id="inp"/>
new DatePicker("#inp");

<select id="sel"></select>
var dp=new DatePicker("#sel");

<div id="div"></div>
var dp=new DatePicker("#div",{date:"17mar2011"});
dp.onClickLink=function(){return true};
DLE module
1. Скопируйте файл datepicker-2.6.js в корень сайта.
2. Скопируйте файл calendar-2.php в папку engine/modules/
3. Внесите изменения в шаблон:
замените {calendar} на {include file="engine/modules/calendar-2.php"}

formatSets the format that is used to display the selected date.
var dp=new DatePicker("#inp",{format:"l, F j, Y"});
dp.setDate("4 july 1776");

Type: String
The default is "j F Y".

dDay of the month, 2 digits with leading zeros01 to 31
DA textual representation of a day, three lettersMon through Sun
jDay of the month without leading zeros1 to 31
l (small 'L')A full textual representation of the day of the weekSunday through Saturday
NISO-8601 numeric representation of the day of the week1 (for Monday) through 7 (for Sunday)
SEnglish ordinal suffix for the day of the month, 2 charactersst, nd, rd or th. Works well with j
wNumeric representation of the day of the week0 (for Sunday) through 6 (for Saturday)
FA full textual representation of a month, such as January or MarchJanuary through December
mNumeric representation of a month, with leading zeros01 through 12
MA short textual representation of a month, three lettersJan through Dec
nNumeric representation of a month, without leading zeros1 through 12
YA full numeric representation of a year, 4 digitsExamples: 1999 or 2003
yA two digit representation of a yearExamples: 99 or 03
Lost in translation

If you set date by the setDate method or the date option, or the user enters some date in input and the autoCorrect option is on, the datepicker tries to parse the entering date. For example the date "1 nov 1977" is completely clear, but what about a date such as "05.06.07"? In case of ambiguity, the datepicker uses format to understand the entered date. See the table on the left. By the way, some dates can be easily understood by the datepicker, for example "0m1" is "1 March 2000" regardless of format, because "0" can only be year, "m" - month, and remain "1" which can only be the day of month.

 format 05.06.07
j F Y5 June 2007
F j Y6  May 2007
F Y j7  May 2006
j Y F5 July 2006
Y j F6 July 2005
Y F j7 June 2005
dateSets the date to display.
new DatePicker("#inp",{date:"10.06.1990"});

Type: String | JavaScript's Date Object
If date is a string, it will be parsed depending on the format option. The default value undefined.
See also the setDate method.

autoOpenDetermines whether or not to open the calendar automatically after clicking on an input field.
new DatePicker("#inp",{autoOpen:true});

Type: Boolean

withoutButtonDetermines whether or not to disable the call button.
 Try to enter a date.
new DatePicker("#inp",{withoutButton:true});

Type: Boolean
The default is false.
Unless stated otherwise (see the autoCorrect option), the DatePicker continues to monitor the input date.

sideButtonDetermines the position of the call button.
new DatePicker("#inp1",{sideButton:true});
new DatePicker("#inp2",{sideButton:false});

Type: Boolean
Place the button over the parent or on the side.
The default value depends on the type of the parent.

hiddenButtonDetermines the appearance of the call button.
new DatePicker("#inp1",{sideButton:true,hiddenButton:true});
new DatePicker("#inp2",{sideButton:true,hiddenButton:false});

Type: Boolean
The default value depends on the type of the parent and on the sideButton option.

autoCorrectEnabling/disabling monitoring and correction of the input field.
try to enter a date and press enter
new DatePicker("#inp1",{autoCorrect:true});
new DatePicker("#inp2",{autoCorrect:false});

Type: Boolean
The default value is true.

min,maxSetting minimum and maximum dates.
new DatePicker("#div",{min:"2feb2011",max:new Date()});

Type: String | JavaScript's Date Object
The default values - min: 1 January 1601 max: 31 December 9999
See also the setLimits method.

firstDayOfWeekSets the day that is considered the beginning of the week.
new DatePicker("#div",{firstDayOfWeek:6});

Type: Number
The default value is 0 (Monday).

 day of week

displayWeekNumbersShow/not show the week numbers.
new DatePicker("#div",{displayWeekNumbers:true});

Type: Boolean
The default value is false.
Week numbering depends on the firstDayOfWeek option.

First daySystemThe first week of the year isWeeks assigned twice
MondayISOthe first week that contains Thursdayno
Tuesdayotherthe first complete weekyes
Wednesdayotherthe first complete weekyes
Thursdayotherthe first complete weekyes
Fridayotherthe first complete weekyes
SaturdayEastthe week containing Jan 1yes
SundayUSAthe week containing Jan 1yes

stylingSet the font size and colors of the calendar.
new DatePicker("#div",{fontSize:24});

Type: different

Property nameDefault value

initialCalendarSets the initial calendar.
new DatePicker("#inp",{initialCalendar:2});

Type: Number
The default value is 0.


mouse wheelConfiguring the mouse wheel.

Type: Boolean
Default values are all TRUE.
wheelMethod can be changed by pressing Ctrl-key, wheelCourse by pressing Shift-key (works only in IE and Firefox)


languageSwitching the default language.
new DatePicker("#div1",{language:"en"});
new DatePicker("#div2",{language:"ru"});

Type: String
Switching the default language. The default value depends on user's language.
A new language can be added by the addLanguage method.


setDate (date)Sets the date to display.
var dp=new DatePicker("#inp");

String | JavaScript's Date Object

New date to set. If parameter is a string, it will be parsed depending on the format option.

Return Value

true if successful, or false otherwise.

See also the date option.

setLimits (min, max)Setting minimum and maximum dates.
var dp1=new DatePicker("#div1");
var dp2=new DatePicker("#div2");

min, max
String | JavaScript's Date Object | 0

new min or max, or 0 if you want to leave that option without changes.
If parameter is a string, it will be parsed depending on the format option.

See also the min,max options.

addLink (date, link, target)Add a link to a specific date.

example see in the Creating a DatePicker section.
String | JavaScript's Date Object

A date for setting a hyperlink.
If parameter is a string, it will be parsed depending on the format option.

link [optional]

A hyperlink for the date.

target [optional]

Specifies where to open the linked document. Default value is "_self".

Return Value

Index. It will be used as argument to the onClickLink function.

This is example for English language (you don't need to do it because the datepicker already contains languages: "en" and "ru").
var langEn=[

Español Gracias a Alexander Garzon
var langEs=[



The language Code ("en"-English, "ru"-Russian, "uk"-Ukrainian and so on).

Array of 5 arrays and 1 string

Array#0 names of the months (January,...).
Array#1 names of the months in genitive case (stycznia, января,...). If not specified, array#0 will be used.
Array#2 short names of the months (Jan,...). If not specified, first three letters from array#0 will be used.
Array#3 days of the week (Monday,...).
Array#4 short names of days of the week (Mon,...). If not specified, first three letters from array#3 will be used.
Array#5 ultra short names of days of the week (Mo,...). If not specified, first two letters from array#4 will be used.
"" - a string with the word "Today".

See also the language option.


onSelect(date)Use for prevent selecting the specified date.
var dp=new DatePicker("#inp");
	var day=date.getDay();
	// disable the Saturdays and Sundays
	if(day==6||day==0) return true;

The parameter date refers to the filtering date.
If you return true, this date will be disabled.

onDateChange()Occurs when the user selects a new date.
var dp=new DatePicker("#inp");

The keyword this refers to the current DatePicker object,
which contains the 'str' property with a formatted current date and so on. See the Properties section.

onClickLink (index, date, link)Occurs when the user clicks a hyperlink.

example see in the Creating a DatePicker section.

The return value of the addLink method.

JavaScript's Date Object

A date to which the link was attached.

String | undefined, if no link was passed through the addLink method.

A link which was attached to the date .

Return Value

return true if you don't want to fire link.

See also the addLink method.


Properties contain the current selected date.
dateJavaScript's Date Object.
strFormatted string.
dDay of month.

Хочу сделать, чтобы часть дат отображалась серым. Мне необходимо выбирать только из четвергов или вторников, допустим. Но все даты одинаково черные, и нет способа отобразить только доступные. Пусть это делает хотя бы тот же OnSelect. И соотвествующие даты не только нельзя выбрать, но и окрашываются серым.
Субботы-воскресенья бы подкрашивать + заведомо "красные" дни.
как изменить цвет выделеных дат
так же , было бы хорошо добавить возможность оформления конкретных дат. Например сделать так чтоб нельзя было выбирать конкретные даты, и чтоб их можно было как-то выделить (например цветом).
Это нужно для того чтоб было интуитивно понятно, что эти даты не выбрать
Календарь хороший, но плохо что нельзя отменять уже выбраную дату.
т.е. если мы уже выбрали день, и оять клацаем по этой дате, чтоб она отмечалась как не помеченная. (например добавить функцию delLink(date)
Ну и было бы не плохо сделать функцию очистки всего календаря. Сейчас можно конечно удалять элемент (на который повесили календарь), а потом снова создавать его, но это не то
Ан нет, это мой недосмотр. В процессе работы стал замечать странности в других участках кода, проверка показала, что "подкидным" был файл jquery-1.5.min.js. После замены его странности в поведении кода и проблемы с hover в календаре пропали.
Замечательный календарь, но вот есть одна неприятная вещь.
У меня в пункте меню есть DIV, служащий полем для приема даты. Рядом с ним я сам добавляю иконку вызова календаря (иначе трудно соблюсти размерности элементов меню).
Календарь вызывается отлично, помещается рядом с этой кнопкой, DIV принимает даты, но...
Перемещения мыши по календарю раскрашивают все бордюры ячеек календаря цветом hoverBorderColor и такими и остаются.
Отличная штуковенция. Спасибо автору.
Стыдно конечно спрашивать, но добрые люди, подскажите - как уговорить браузер выполнять следующую операцию:
Календарь находится на странице стационарно, при щелчке мышью по дате необходимо открыть *.htm документ. Путь к документу жестко зависит от выбранной даты.
С помощью dp.onSelect удалось сгенерировать необходимый путь и поместить его в контейнер div. Каким образом превратить содержимое контейнера в гиперссылку и привязать ее к ячейке в календаре?

Еще раз спасибо.
No source code makes this datepicker bottom of my list. To risky to use.
Thanks a lot! There are all i need here! :)