jQuery календарь (datePicker)


Попался мне очень удобный и функциональный 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 контейнере.

, , ,

1 Star2 Stars3 Stars4 Stars5 Stars (голосов 11, в среднем: 4.36 из 5)
Loading ... Loading ...


  1. #1 illusions - Май 26th, 2009 at 21:58

    Дякую за календарик, а то datePicker з Jquery UI важить разом з UI біля 200 Кб – явно забагато для такого.

  2. #2 Vova - Июнь 16th, 2009 at 11:05

    Здраствуйте – скачал я етот чудесный руский календарик jQuery календарь (datePicker).
    Но вот проблема календарь не показывает реальную дату с хостинга, а показывает дату которая установлена на компютере.
    Очень нужна ваша помощ – возможно ли исправить ету проблему ?

    Большая прозьба отписать в любом случае !!!
    Зарание благодарен – Владимир.

  3. #3 nice - Июнь 16th, 2009 at 11:37

    Здравствуйте, ну как знаю я, это javascript который выполняется на компьютере пользователя. Вот поэтому и его дата.
    Думаю как параметр ему можно передавать текущую дату, что и можно делать у вас на сервере.
    Может как вариант на сервере в startDate: вставлять текущую дату, но я не знаю, не копал в эту сторону…

  4. #4 Vova - Июнь 16th, 2009 at 13:52

    Спасибо за ответ – прозьба – если узнаете как ето все осуществить сообщите пожалуйста !

  5. #5 Vova - Июнь 16th, 2009 at 14:19

    Посоветуйте простой но хороший опрос для сайта !

  6. #6 nice - Июнь 16th, 2009 at 14:24

    напишите в гугле poller jquery или голосование jquery

    он много посоветует :)

    а так я немного позже сделаю обзор голосовалки…

  7. #7 Vova - Июнь 16th, 2009 at 14:37

    Ок СПС !

  8. #8 Vova - Июнь 16th, 2009 at 16:50

    Больша прозьба зделайте обзор звездочного голосования !

  9. #9 Vova - Июнь 17th, 2009 at 14:29

    Здраствуйте !
    У меня такая проблема – установил календарик, все чудесно работает – пожже подключил Lightbox, и одно с другим конфликтирует.
    Возможно ли ето как нибуть исправить или заменить лайтбокс jquery лайтбоксом ?

    Зарание спасибо !

  10. #10 nice - Июнь 17th, 2009 at 14:46

    интересно, а как он может конфликтовать?

  11. #11 Vova - Июнь 17th, 2009 at 14:49

    Ну например подключаю скрипты календаря

    потом лайт бокс

    то что снизу работать будет, а что сверху нет.
    я уже читал в интернете – есть такая фигня.
    только как решить ?

  12. #12 nice - Июнь 18th, 2009 at 11:04

    по правде такого не встречал… думаю что-то неправильно подключаешь

  13. #13 Vova - Июнь 18th, 2009 at 16:31

    большая прозьба – если можно показать пример HTML – с порядком подключения календарика и лайтбокса (типа что за чем идет). Очень прошу, очень нужно – именно на етом я и застрял. Календарик я выбрал в div контейнере.
    Лайтбокс http://www.huddletogether.com/projects/lightbox2/

    Зарание благодарю.

  14. #14 Vova - Июнь 19th, 2009 at 10:54

    Уже нашол ришение Slimbox 2.

  15. #15 Vova - Июнь 19th, 2009 at 11:19

    У меня один вопрос – может и глупый, но я только начинаю розбиратся с jquery.
    Если у меня календарик использует библиотеку jQuery 1.2.6 и я подключаю другие плагины например лайтбокса jQuery которые используют такую же библиотеку мне нинадо прописывать в HTML ту же библиотеку. Повторюсь вопрос глупый но мне надо знать наверника !

    Зарание благодарю !

  16. #16 nice - Июнь 19th, 2009 at 13:15

    jquery достаточно вызвать один раз.

  17. #17 Vova - Июнь 22nd, 2009 at 11:10

    СПС

  18. #18 HoHo - Август 5th, 2009 at 16:17

    Небольшая ошибочка, есть в календарике два 25 октября..

  19. #19 nice - Август 5th, 2009 at 18:31

    ухты! Действитель!

    Спасибо, будем знать :)

  20. #20 HoHo - Август 6th, 2009 at 18:01

    Подскажите пожалуйста, как отменить действие _closeCalendar(), чтобы блок dp-popup с календарем никогда не закрывался, вариант в примере 8 не подходит

  21. #21 nice - Август 7th, 2009 at 19:46

    А почему не подходит вариант 8?

    А так, думаю нужно редактировать плагин… или на оф.сайте смотреть, может там есть какая то опция. По правде не смотрел…нет времени. Может попозже как то!

  22. #22 omelniz - Ноябрь 12th, 2009 at 18:47

    Спасибо, очень помог этот календарь.

  23. #23 Хренюля - Декабрь 28th, 2009 at 22:28

    Какого хрена в календаре №8 нельзя уйти в предыдущие месяцы?
    Херово

  24. #24 nice - Декабрь 29th, 2009 at 12:53

    для этого, достаточно в параметрах указать дату начала календаря, например: startDate: ’01-01-2000′

  25. #25 Дмитрий - Март 1st, 2010 at 12:35

    Спасибо, очень хороший календарик, все замечательно работает но у ie8 выводит ошибку

    Message: ‘null’ is null or not an object
    Line: 484
    Char: 4
    Code: 0
    URI:date.js

  26. #26 nice - Март 1st, 2010 at 13:02

    Потому что это IE! :)

    Ну а серьезно, то я не знаю в чем причина, запустил в IE 8.0.600118372 все норм!

  27. #27 Vitaliy - Июнь 15th, 2010 at 11:05

    Огромное спасибо за статью. Очень помогла. Автор действительно просто описал всё что нужно, и какие параметры вводить.
    Респект, Спасибо!!!

  28. #28 SS - Октябрь 19th, 2010 at 17:20

    В google chrom не работает…

  29. #29 nice - Октябрь 20th, 2010 at 22:21

    К сожелению, да.

    Но нету времени разбираться.
    Разработчикам календаря – виднее!

  30. #30 Guest - Декабрь 15th, 2010 at 19:14

  31. #31 Максим - Апрель 4th, 2012 at 16:57

    “NetworkError: 404 Not Found – http://www.webnotes.com.ua/demo/datepicker/datepicker.css

    при просмотре демок

  32. #32 Максим - Апрель 11th, 2012 at 13:05

    Привет.
    Измени в адресе datepicker.css на datePicker.css
    Потому как даже твоё демо не работает.

  33. #33 Flash - Ноябрь 26th, 2012 at 20:02

    Привет.
    Нужно решить следующую задачу, есть два календаря для туристического сайта, в первом календаре выбирается дата вылета, во втором дата прилёта, как сделать так чтобы при закрытие первого календаря сразу открывался второй, со всеми предназначенными настройками при нормальном нажатие на input? Буду благодарен за помощь.

  34. #34 Flash - Ноябрь 26th, 2012 at 20:14

    решение есть, сам разобрался. Если кому понадобится, делаем так:
    добавляем в первый вызов календаря следующие:

    ,onClose: function() {
    $( “#название_ID_второго_календаря” ).datepicker( “show” );
    }

(will not be published)

Spam Protection by WP-SpamFree Plugin

  1. No trackbacks.