JavaScript Datepicker / Calendar Control
Download DatePicker v2.6
07-Apr-2011 [11KB, Min, Gzip]
Implementation
<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");
dp.onDateChange=onDateChangeFunction;

<div id="div"></div>
var dp=new DatePicker("#div",{date:"17mar2011"});
dp.addLink("26mar2011");
dp.addLink("08mar2011","");
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"}
Options

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".

---Day---
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)
---Month---
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
---Year---
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
0Monday
1Tuesday
2Wednesday
3Thursday
4Friday
5Saturday
6Sunday

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
fontSize13
fontFamily'Tahoma'
fontColorblack
backColorwhite
selectedBackColor#D4E7FF
selectedBorderColor#84ACDD
disabledColor#B5B5B5
hoverFontColour#0066CC
hoverBackColor#EDF5FF
hoverBorderColor#B9D7FC
linkFontColorwhite
linkBackColor#FF6600

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

Type: Number
The default value is 0.

ValueCalendar
0days
1months
2years
3decades

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)

Optionfalse/true
wheelUseoff/on
wheelMethoddirection/zoom
wheelDirectionCourseleft/right
wheelZoomCoursedeeper/higher

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.

Methods

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

date
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
Boolean

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");
dp1.onDateChange=function(){dp2.setLimits(this.date,0)};
dp2.onDateChange=function(){dp1.setLimits(0,this.date)};

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.
date
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]
String

A hyperlink for the date.

target [optional]
String

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

Return Value
Number

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=[
 ["January","February","March","April","May","June","July",
		"August","September","October","November","December"],
 [],
 [],
 ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],
 [],
 [],
 "Today"];

dp.addLanguage("en",langEn);
Español Gracias a Alexander Garzon
var langEs=[
 ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio",
		"Agosto","Septiembre","Octubre","Noviembre","Diciembre"],
 [],
 [],
 ["Lunes","Martes","Miércoles","Jueves","Viernes","Sábado","Domingo"],
 [],
 [],
 "Hoy"];

dp.addLanguage("es",langEs);

language
String

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

language_pack
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.

Events

onSelect(date)Use for prevent selecting the specified date.
var dp=new DatePicker("#inp");
dp.onSelect=function(date)
{
	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");
dp.onDateChange=function()
{
	$("#result").html(this.str);
}
#result:

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.
index
Number

The return value of the addLink method.

date
JavaScript's Date Object

A date to which the link was attached.

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

A link which was attached to the date .

Return Value
Boolean

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

See also the addLink method.

Properties

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


Comments
Mir1346841597655#107
Хочу сделать, чтобы часть дат отображалась серым. Мне необходимо выбирать только из четвергов или вторников, допустим. Но все даты одинаково черные, и нет способа отобразить только доступные. Пусть это делает хотя бы тот же OnSelect. И соотвествующие даты не только нельзя выбрать, но и окрашываются серым.
Guest1334669239727#106
Субботы-воскресенья бы подкрашивать + заведомо "красные" дни.
jk1334610937145#105
как изменить цвет выделеных дат
ML1330790606296#104
так же , было бы хорошо добавить возможность оформления конкретных дат. Например сделать так чтоб нельзя было выбирать конкретные даты, и чтоб их можно было как-то выделить (например цветом).
Это нужно для того чтоб было интуитивно понятно, что эти даты не выбрать
ML1330790472997#103
Календарь хороший, но плохо что нельзя отменять уже выбраную дату.
т.е. если мы уже выбрали день, и оять клацаем по этой дате, чтоб она отмечалась как не помеченная. (например добавить функцию delLink(date)
Ну и было бы не плохо сделать функцию очистки всего календаря. Сейчас можно конечно удалять элемент (на который повесили календарь), а потом снова создавать его, но это не то
SIM1330207334053#102
Ан нет, это мой недосмотр. В процессе работы стал замечать странности в других участках кода, проверка показала, что "подкидным" был файл jquery-1.5.min.js. После замены его странности в поведении кода и проблемы с hover в календаре пропали.
SIM1330121493150#101
Замечательный календарь, но вот есть одна неприятная вещь.
У меня в пункте меню есть DIV, служащий полем для приема даты. Рядом с ним я сам добавляю иконку вызова календаря (иначе трудно соблюсти размерности элементов меню).
Календарь вызывается отлично, помещается рядом с этой кнопкой, DIV принимает даты, но...
Перемещения мыши по календарю раскрашивают все бордюры ячеек календаря цветом hoverBorderColor и такими и остаются.
Dim1322061237973#100
Отличная штуковенция. Спасибо автору.
Стыдно конечно спрашивать, но добрые люди, подскажите - как уговорить браузер выполнять следующую операцию:
Календарь находится на странице стационарно, при щелчке мышью по дате необходимо открыть *.htm документ. Путь к документу жестко зависит от выбранной даты.
С помощью dp.onSelect удалось сгенерировать необходимый путь и поместить его в контейнер div. Каким образом превратить содержимое контейнера в гиперссылку и привязать ее к ячейке в календаре?

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