Модуль UI Datepicker — календарь

Модуль UI Datepicker позволяет создать календарь. Для загрузки модуля переходим на страницу http://jqueryui.com/download. Оставляем установленными флажки UI Core, Datepicker, 1.7.2, выбираем тему из списка (например, Humanity), а затем щелкаем на кнопке Download. Распаковываем архив в отдельную папку. Из этого архива для работы модуля необходимы следующие файлы:

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

Листинг 12.23. Календарь с параметрами по умолчанию

<!doctype html>
<html>
<head>
<title>Календарь с параметрами по умолчанию</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet"
      href="css/humanity/jquery-ui-1.7.2.custom.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script
      src="development-bundle/ui/i18n/ui.datepicker-ru.js"></script>
<script>
$(document).ready(function() {
   $("#datepicker1").datepicker();
   $("#datepicker2").datepicker();
});
</script>
</head>
<body style="font-size:8pt; font-family:Verdana">
<table border="0"><tr><td>
<div id="datepicker1"></div>
</td><td valign="top">
<input type="text" id="datepicker2">
</td></tr></table>
</body>
</html>

Результат выполнения листинга 12.23 показан на рис. 12.7.

pic12_7.png

Рис. 12.7. Календарь с параметрами по умолчанию

Как видно из примера, шаблоном для календаря может быть элемент DIV.

<div id="datepicker1"></div>

Или элемент INPUT.

<input type="text" id="datepicker2">

В первом случае календарь показывается постоянно, во втором случае — только тогда, когда текстовое поле получит фокус ввода. После выбора даты она отображается в поле ввода, а календарь скрывается.

Для создания календаря и управления им предназначен метод datepicker(). Формат метода:

datepicker([<Объект с опциями>])

Параметр <Объект с опциями> представляет собой объект, состоящий из пар "опция/значение". Могут быть указаны следующие опции.

['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',
'Friday', 'Saturday']
['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
['January', 'February', 'March', 'April', 'May', 'June', 'July',
'August', 'September', 'October', 'November', 'December']
['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',
'Oct', 'Nov', 'Dec']
$("#datepicker").datepicker({
   prevText: "MM", // Полное название месяца
   nextText: "MM", // Полное название месяца
   showButtonPanel: true,
   currentText: "dd.mm.yy", // Дата формата 27.07.2009
   navigationAsDateFormat: true
});

pic12_8.png

Рис. 12.8. Две кнопки, добавляемые с помощью опции showButtonPanel

pic12_9.png

Рис. 12.9. Раскрывающиеся списки, предназначенные для выбора месяца и года

pic12_10.png

Рис. 12.10. Вид календаря при значении опции numberOfMonths, равном 3

pic12_11.png

Рис. 12.11. Вид календаря при значении опции numberOfMonths, равном [2,3]

$("#datepicker").datepicker({
   numberOfMonths: 3,
   showCurrentAtPos: 1
});
minDate: new Date(2009, 2, 1)
maxDate: 10
minDate: -10

Если указаны значения button или both, то после текстового поля автоматически будет добавлена кнопка.

Определить значения опций по умолчанию для всех календарей позволяет метод $.datepicker.setDefaults(). Формат метода:

$.datepicker.setDefaults(<Объект с опциями>);

В качестве примера переопределим некоторые опции локализации.

$.datepicker.setDefaults(
   $.extend($.datepicker.regional["ru"], {
      prevText: "MM",
      nextText: "MM",
      currentText: "dd.mm.yy",
      dateFormat: "dd.mm.y"
   })
);

Чтобы изменить или получить значения опций уже после создания, необходимо использовать второй формат метода datepicker(). Для этого в первом параметре указывается значение "option", во втором — название опции, а в третьем — новое значение.

$("#datepicker").datepicker("option", "dateFormat", "dd M yy");

Если необходимо получить значение опции, то третий параметр указывать не нужно. В качестве примера отобразим текущий формат даты.

alert($("#datepicker").datepicker("option", "dateFormat"));

Выведем несколько календарей с различными настройками (листинг 12.24). Первый календарь постоянно отображен. Второй показывает сразу три месяца за раз и имеет ограничение на диапазон дат. Отображение календаря происходит при получении фокуса ввода текстовым полем. Кроме того, с помощью кнопки можно изменить формат даты. Третий календарь имеет раскрывающиеся списки с месяцами и годами и открывается с помощью щелчка на изображении. При выборе даты она отображается в поле ввода в одном формате, а затем дублируется в дополнительное текстовое поле в другом формате.

Листинг 12.24. Варианты календарей

<!doctype html>
<html>
<head>
<title>Модуль UI Datepicker. Варианты календарей</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet"
      href="css/humanity/jquery-ui-1.7.2.custom.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script
      src="development-bundle/ui/i18n/ui.datepicker-ru.js"></script>
<script>
$(document).ready(function() {
   $.datepicker.setDefaults( // Настройки для всех календарей
      $.extend($.datepicker.regional["ru"], {
         prevText: "MM",
         nextText: "MM",
         currentText: "dd.mm.yy",
         dateFormat: "dd.mm.y"
      })
   );
   $("#datepicker1").datepicker(); // Статичный календарь
   // Календарь, показывающий сразу три месяца и имеющий ограничения
   $("#datepicker2").datepicker({
      maxDate: "+1y", // Максимальная дата
      minDate: "-12w", // Минимальная дата
      showButtonPanel: true, // Показать панель с кнопками
      numberOfMonths: 3, // Показывать сразу 3 месяца
      stepMonths: 3, // Сдвигать календарь на 3 месяца
      hideIfNoPrevNext: true,
      navigationAsDateFormat: true
   });
   // Календарь, открывающийся с помощью щелчка на изображении и
   // заполняющий дополнительное текстовое поле
   $("#datepicker3").datepicker({
      changeMonth: true, // Раскрывающийся список с месяцами
      changeYear: true, // Раскрывающийся список с годами
      yearRange: "1970:2011", // Диапазон в списке с годами
      showOn: "button", // Открывать при щелчке на кнопке
      buttonImage: "calendar.gif", // Адрес изображения
      buttonImageOnly: true, // Использовать изображение вместо кнопки
      appendText: " Обязательное поле",
      altField: "#txt1", // Ссылка на дополнительное поле
      altFormat: "dd M yy" // Формат даты в дополнительном поле
   });
   $("#btn1").click(function() { // Изменение формата даты
      $("#datepicker2").datepicker("option", "dateFormat", "dd M yy");
   });
});
</script>
</head>
<body style="font-size:8pt; font-family:Verdana">
<div id="datepicker1"></div><br><br>
<input type="text" id="datepicker2">
<input type="button" value="Изменить формат" id="btn1"><br><br>
<input type="text" id="datepicker3"> <input type="text" id="txt1">
</body>
</html>

В опциях dateFormat, altFormat и некоторых других опциях, задающих формат отображения даты, может быть использована комбинация следующих служебных символов:

Текст, не содержащий специальных символов, будет выводиться как есть (например, шаблон "Сегодня: dd.mm.yy" будет соответствовать выводу "Сегодня: 29.07.2009").

Модуль UI Datepicker предоставляет также несколько предопределенных форматов даты.

Для управления календарем предназначены следующие методы.

datepicker("dialog", <Дата в виде строки>[,
   <Функция обратного вызова>[, <Опции>[, <Позиция>]]])

Во втором параметре указывается дата в формате, указанном в опции dateFormat. Календарь будет открыт на указанной дате. В параметре <Функция обратного вызова> можно указать ссылку на функцию, которая будет вызвана после выбора даты в календаре. Параметр <Опции> позволяет задать новые опции календаря, а в параметре <Позиция> можно указать координаты левого верхнего угла (например, [150, 150]).

datepicker("setDate", <Дата>)

Во втором параметре дату можно указать следующими способами:

Пример использования различных методов приведен в листинге 12.25.

Листинг 12.25. Пример использования различных методов

<!doctype html>
<html>
<head>
<title>Модуль UI Datepicker. Методы</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet"
      href="css/humanity/jquery-ui-1.7.2.custom.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script
      src="development-bundle/ui/i18n/ui.datepicker-ru.js"></script>
<script>
$(document).ready(function() {
   $("#datepicker").datepicker();
   $("#btn1").click(function() {
      $("#datepicker").datepicker("disable");
   });
   $("#btn2").click(function() {
      $("#datepicker").datepicker("enable");
   });
   $("#btn3").click(function() {
      if ($("#datepicker").datepicker("isDisabled")) {
         alert("Запрещено");
      }
      else {
         alert("Разрешено");
      }
   });
   $("#btn4").click(function() {
      $("#datepicker").datepicker("show");
   });
   $("#btn5").click(function() {
      $("#datepicker").datepicker("hide");
   });
   $("#btn6").click(function() {
      $("#datepicker").datepicker("setDate", "+1y");
   });
   $("#btn7").click(function() {
      alert($("#datepicker").datepicker("getDate"));
   });
   $("#btn8").click(function() {
      $("#datepicker").datepicker("dialog", "27.06.2009",
      function(dateText) {
         alert("Выбрана дата: " + dateText);
      }, { changeMonth: true, changeYear: true }, [200, 200]);
   });
});
</script>
</head>
<body style="font-size:8pt; font-family:Verdana">
<input type="button" value="Запретить" id="btn1">
<input type="button" value="Разрешить" id="btn2">
<input type="button" value="Проверить статус" id="btn3">
<input type="button" value="Открыть" id="btn4">
<input type="button" value="Закрыть" id="btn5">
<input type="button" value="Выбрать дату" id="btn6">
<input type="button" value="Получить дату" id="btn7">
<input type="button" value="Открыть диалог" id="btn8"><br><br>
<input type="text" id="datepicker">
</body>
</html>

Обработать события, происходящие с календарем, можно следующим образом.

datepicker({
  <Событие>: <Функция обратного вызова>
});

В параметре <Событие> могут быть указаны следующие события.

function <Название функции>([<Ссылка на поле ввода>]) {
   // ...
}
function <Название функции>(<Объект Date>) {
   // ...
}

Внутри функции необходимо вернуть массив со следующими элементами:

function <Название функции>(<Год>, <Месяц>, <Объект>) {
   // ...
}

В событиях onSelect и onClose указывается ссылка на функцию следующего формата.

function <Название функции>(<Дата>, <Объект>) {
   // ...
}

Внутри функции обратного вызова доступен указатель (this) на поле ввода. Через параметр <Дата> можно получить дату в виде строки в формате, заданном опцией dateFormat. Параметр <Объект> представляет собой объект со следующими свойствами:

Пример обработки различных событий приведен в листинге 12.26.

Листинг 12.26. Модуль UI Datepicker, обработка событий

<!doctype html>
<html>
<head>
<title>Модуль UI Datepicker, обработка событий</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet"
      href="css/humanity/jquery-ui-1.7.2.custom.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script
      src="development-bundle/ui/i18n/ui.datepicker-ru.js"></script>
<script>
$(document).ready(function() {
   $("#datepicker").datepicker({
      changeMonth: true, // Раскрывающийся список с месяцами
      changeYear: true, // Раскрывающийся список с годами
      yearRange: "1970:2009", // Диапазон в списке с годами
      maxDate: "+1y", // Максимальная дата
      minDate: "-12w", // Минимальная дата
      beforeShow: function(elem) {
         $("#div1").html("Событие beforeShow<br>");
         $(elem).css("background-color", "#fff4dd");
      },
      beforeShowDay: function(d) {
         var curd = $.datepicker.formatDate("dd.mm.yy", new Date());
         var dat = $.datepicker.formatDate("dd.mm.yy", d);
         // Если дата является текущей, то указываем для ячейки
         // с датой класс cls1, а также задаем текст подсказки
         if (dat == curd) return [true, "cls1", "Это сегодня"];
         // Если число месяца равно 10, то делаем дату неактивной
         else if (d.getDate() == 10) return [false, "cls2"];
         else return [true, "cls2"];
      },
      onChangeMonthYear: function(y, m, obj) {
         var msg = "Событие onChangeMonthYear<br>";
         msg += "Год: " + y + "<br>Месяц: " + m + "<br>"
         $("#div1").append(msg);
      },
      onSelect: function(d, obj) {
         var msg = "Событие onSelect<br>Выбранная дата: " + d;
         $("#div1").append(msg + "<br>");
      },
      onClose: function(d, obj) {
         var msg = "Событие onClose<br>";
         if (obj.currentDay == 0) msg += "Дата не выбрана<br>";
         else {
            msg += "Выбранная дата: " + obj.currentDay + ".";
            msg += (obj.currentMonth + 1) + "." + obj.currentYear;
            msg += "<br>";
         }
         $("#div1").append(msg);
         $(this).css("background-color", "#ffffff");
      }
   }).css("background-color", "#ffffff");
});
</script>
<style>
.cls1 { background-color: red; }
.cls2 { }
</style>
</head>
<body style="font-size:8pt; font-family:Verdana">
<input type="text" id="datepicker">
<div id="div1"></div>
</body>
</html>

Модуль UI Datepicker предоставляет также три функции, предназначенные для преобразования даты из одного формата в другой.

$.datepicker.formatDate(<Формат даты>, <Объект Date>[, <Опции>])

Пример:

alert($.datepicker.formatDate("dd.mm.yy", new Date(2009, 6, 29)));
// Выведет: 29.07.2009
$.datepicker.parseDate(<Формат даты>, <Дата в виде строки>[,
   <Опции>])

Пример:

var d = $.datepicker.parseDate("dd.mm.yy", "29.07.2009");
alert(d.toString());
// Выведет: Wed, 29 Jul 2009 00:00:00 GMT+0400

В качестве еще одного примера передадим строку с неправильным форматом даты и выведем сообщение об ошибке.

try {
   var d = $.datepicker.parseDate("dd.mm.yy", "29.07");
}
catch(err) {
   alert(err); // Выведет: Unexpected literal at position 5
}
$.datepicker.iso8601Week(<Объект Date>)

Пример:

alert($.datepicker.iso8601Week(new Date(2009, 6, 29)));
// Выведет: 31

С параметре <Опции> могут быть указаны следующие значения:

Кроме того, в функции $.datepicker.parseDate() в параметре <Опции> может быть указана опция shortYearCutoff, значение которой служит для определения, к какому столетию принадлежит год, заданный двумя цифрами. Указывается число от 0 до 99.

var d = $.datepicker.parseDate("dd-MM-y", "29-Июль-09", {
   shortYearCutoff: 9,
   monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь',
        'Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь']
});
alert(d.toString());
// Выведет: Wed, 29 Jul 2009 00:00:00 GMT+0400
Предыдущая статья Все статьи Следующая статья