Как сделать календарь на jQuery.


Сделать календарь на jQuery – достаточно просто. В этом вы сможете убедиться уже через несколько минут. Весь процесс занимает не более 10-15 минут. Мы будем использовать виджет jQuery под названием Datepicker.

Итак, приступим. Для начала демонстрация – здесь.

1. Подключаем фреймворк jQuery к нашим страницам, а также стили для виджета календарь и, собственно, js-код нужной библиотеки. Все скрипты по стандарту включаем в «голову» страницы.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Календарь на jQuery</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script>
       $(function() {
           $( "#our_date" ).datepicker();
       });
    </script>
</head>

Как видно из кода, мы инициализируем календарь для элемента страницы с идентификатором id=»our_date». Этим элементом будет являться текстовое поле, которое мы создадим на следующем шаге.

2. Создаем текстовое поле с идентификатором id=»our_date».

1
2
3
4
   <body>
      <input type="text" id="our_date" value="" name="our_date">
   </body>
</html>

Наш календарь готов, можно тестировать.

По умолчанию формат даты выглядит таким образом:
12/13/2012
Но мы можем установить свой под наши задачи, например:

1
$("#datepicker").datepicker({ dateFormat: "dd-mm-yy" });

Результатом будет дата в формате 04-12-2012.





Другие посты

Категория: jQuery

Комментарии (1)

 

  1. Игорь:

    Спасибо, классно!
    Можно ли размер календаря уменьшить?

Оставить комментарий