Web notes

Попался мне очень удобный и функциональный jQuery календарик!

Первым делом сделал его русским, так как в оригинале он английский и немного поменял способ вывода иконки календарика для выбора даты. Оригинальную версию которого можно найти тут.

Подключается он как всегда очень просто!

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="date.js"></script>
<script type="text/javascript" src="jquery.datePicker-2.1.2.js"></script>
<link rel="stylesheet" href="datepicker.css" type="text/css" /> 

В строке 1, наш любимый jQuery, строка 2 - настройки календаря, строка 3 - сам календарик, ну и его стиль - строка 4.

А тут в архиве можно скачать русский календарь на jQuery.

Теперь рассмотрю несколько способов вызова.

1. Обычный календарь на jQuery

<script type="text/javascript">
$(function()
{
$('#inputDate1').datePicker();
});
</script>

поле ввода:

<input  id="inputDate1" value="" />

и пример: Календарь на jQuery.

2. Календарь с заданным диапазоном

Календарь с активными датами от 01-01-2000 по 01-01-2012, вызов по нажатии на иконку календарика.

<script type="text/javascript">
$(function()
{
$('#inputDate2').datePicker({
startDate: '01-01-2000',
endDate: '01-01-2012'
});
});
</script>

поле ввода:

<input  id="inputDate2" value="" />

и пример: Календарь с заданным диапазоном.

3. Вызов по нажатию на поле ввода

Обычный календарь без иконки календарика, вызов по нажатию на поле ввода.

<script type="text/javascript">
$(function()
{
$('#inputDate3').datePicker({
createButton:false,
clickInput:true
});

});
</script>

поле ввода:

<input  id="inputDate3" value="" />

и пример: Вызов по нажатию на поле ввода.

4. Календарь на год

Календарь с активной датой на год с сегодняшнего дня, вызов по нажатию на поле ввода.

<script type="text/javascript">
$(function()
{
$('#inputDate4').datePicker({
createButton:false,
clickInput:true,
endDate: (new Date()).addDays(365).asString()
});
});
</script>

поле ввода:

<input  id="inputDate4" value="" />

и пример: Календарь на год.

5. Календарь с активными рабочими днями

Календарь с активными рабочими днями (кроме субботы и воскресенья) с датой на год от сегодняшнего дня, вызов по нажатию на поле ввода и по нажатии на иконку календарика.

<script type="text/javascript">
$(function()
{
$('#inputDate5').datePicker({
clickInput:true,
endDate: (new Date()).addDays(365).asString(),
renderCallback:function($td, thisDate, month, year)
{
if (thisDate.isWeekend()) {
$td.addClass('weekend');
$td.addClass('disabled');
}
}
});
});
</script>

поле ввода:

<input  id="inputDate5" value="" />

и пример: Календарь с активными рабочими днями.

6. Календарь с кнопкой «Закрыть»

Календарь с кнопкой «Закрыть», вызов по нажатии на иконку календарика. После выбора даты - не закрывается. По нажатию на поле ввода происходит обработка функции «click»

<script type="text/javascript">
$(function()
{
$('#inputDate6').datePicker({
displayClose:true,
closeOnSelect:false
})
.bind(
'click',
function()
{
alert("сработал click!");
}
);
});
</script>

поле ввода:

<input  id="inputDate6" value="" />

и пример: Календарь с кнопкой «Закрыть».

7. Начало за 5 дней от сегодня

Календарь, активные дни которого начинаются за 5 дней от сегодняшней даты, вызов по нажатию на поле ввода. После выбора даты происходит обработка функции «dateSelected», которая вызывает сообщение с выбранной датой и присваивает ее предыдущему полю. После закрытия календаря происходит обработка функции «dpClosed»

<script type="text/javascript">
$(function()
{
$('#inputDate7')
.datePicker({
createButton:false,
startDate: (new Date()).addDays(-5).asString(),
clickInput:true
}
)
.bind(
'dpClosed',
function(e, selectedDate)
{
alert("сработал dpClosed");
}
)
.bind(
'dateSelected',
function(e, selectedDate, $td)
{
alert("сработал dateSelected, " + selectedDate.asString());
$('#inputDate7').val(selectedDate.asString());
$('#inputDate6').dpSetSelected(selectedDate.addDays(0).asString());
}
);
});
</script>

поле ввода:

<input  id="inputDate7" value="" />

и пример: Начало за 5 дней от сегодня.

8. Календарь в DIV контейнере

Календарь в DIV контейнере, при изменении даты обработка функции «dateSelected».

<script type="text/javascript">
$(function()
{
$('#inputDate8')
.datePicker({inline:true})
.bind('dateSelected',function(e, selectedDate, $td)
{
alert(selectedDate.asString());
}
);
});
</script>

DIV контейнер:

<div id="inputDate8"></div>

и пример: Календарь в DIV контейнере.