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

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

jquery-ui-1.7.2.custom.css и каталог images (папка css\humanity);
jquery-1.3.2.min.js (папка js);
jquery-ui-1.7.2.custom.min.js (папка js);
ui.datepicker-ru.js (папка development-bundle\ui\i18n).

Все указанные файлы необходимо подключить к скрипту в том порядке, в котором они перечислены. В качестве примера выведем календарь с параметрами по умолчанию (листинг 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.

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

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

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

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

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

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

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

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

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

showAnim — задает тип анимации при открытии календаря. Могут быть заданы значения "show", "slideDown", "fadeIn" или один из эффектов, определенных в jQuery UI Effects. Значение по умолчанию — "show".
showOptions — если в опции showAnim указан один из эффектов, определенных в jQuery UI Effects, то с помощью этой опции можно передать дополнительные настройки. Значение по умолчанию — {}.
duration — позволяет указать длительность эффекта анимации при открытии календаря. Может быть задано значение в миллисекундах или одно из строковых значений ("fast", "normal" или "slow"). Значение по умолчанию — "normal".
constrainInput — если указано значение false, то в текстовое поле можно ввести строку любого формата. По умолчанию опция принуждает строго соблюдать формат даты, определенный в опции dateFormat. Значение по умолчанию — true.
dayNames — массив с полными названиями дней недели (начиная с воскресенья). Значение по умолчанию:

['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',
 'Friday', 'Saturday']

dayNamesMin — массив с названиями дней недели из двух букв (начиная с воскресенья). Значение по умолчанию:

['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']

dayNamesShort — массив с названиями дней недели из трех букв (начиная с воскресенья). Значение по умолчанию:

['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

monthNames — массив с полными названиями месяцев. Значение по умолчанию:

['January', 'February', 'March', 'April', 'May', 'June', 'July',
'August', 'September', 'October', 'November', 'December']

monthNamesShort — массив с названиями месяцев из трех букв. Значение по умолчанию:

['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',
'Oct', 'Nov', 'Dec']

prevText — текст подсказки, появляющийся при наведении курсора мыши на значок, который служит ссылкой для перехода на предыдущий месяц. Если файл стилей не подключен, то этот текст становится текстом ссылки. Значение по умолчанию — "Prev".
nextText — текст подсказки, появляющийся при наведении курсора мыши на значок, который служит ссылкой для перехода на следующий месяц. Если файл стилей не подключен, то этот текст становится текстом ссылки. Значение по умолчанию — "Next".
navigationAsDateFormat — если указано значение true, то указание в опциях nextText, prevText и currentText строки специального формата будет приводить, например, к выводу названий месяцев в качестве текста подсказки.

$("#datepicker").datepicker({
   prevText: "MM", // Полное название месяца
   nextText: "MM", // Полное название месяца
   showButtonPanel: true,
   currentText: "dd.mm.yy", // Дата формата 27.07.2009
   navigationAsDateFormat: true
});

isRTL — если используется язык с написанием справа налево, то в этой опции указывается значение true. Значение по умолчанию — false.
firstDay — устанавливает день недели, который будет отображен первым в календаре. Для воскресенья указывается значение 0, для понедельника значение 1. Значение по умолчанию — 0.
dateFormat — формат возвращаемой даты. Значение по умолчанию — "mm/dd/yy".
shortYearCutoff — значение для определения, к какому столетию принадлежит год, заданный двумя цифрами. Если указано число от 0 до 99, то значение используется как есть. Если указана строка, то она преобразуется в число и прибавляется к текущему году. В этом случае в качестве значения будут использоваться две последние цифры года. Если год из двух цифр меньше значения опции или равен ему, то год принадлежит к текущему столетию, а если больше — то к предыдущему. Значение по умолчанию — "+10". Например, текущий год 2009. По умолчанию к этому году прибавляется значение 10 и отбрасываются две первые цифры. Таким образом, значением опции будет число 19. При сравнении дата 01.01.19 будет преобразована в 01.01.2019, а дата 01.01.20 — в 01.01.1920.
showButtonPanel — если указано значение true, то будет показана панель с двумя кнопками (рис. 12.8). Первая кнопка предназначена для перехода к сегодняшней дате, а вторая служит для закрытия календаря. Значение по умолчанию — false.

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

currentText — текст на кнопке, предназначенной для перехода к сегодняшней дате. Кнопка будет доступна, если опция showButtonPanel имеет значение true. Значение по умолчанию — "Today".
gotoCurrent — если указано значение true, то кнопка, по умолчанию предназначенная для перехода к сегодняшней дате, будет указывать на ранее выбранную дату, а не на текущую. Кнопка будет доступна, если опция showButtonPanel имеет значение true. Значение по умолчанию — false.
closeText — текст на кнопке, предназначенной для закрытия календаря. Кнопка будет доступна, если опция showButtonPanel имеет значение true. Значение по умолчанию — "Done".
changeMonth — если указано значение true, то можно будет выбирать месяц из раскрывающегося списка (рис. 12.9). Значение по умолчанию — false.
changeYear — если указано значение true, то можно будет выбирать год из раскрывающегося списка (см. рис. 12.9). Значение по умолчанию — false.

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

yearRange — позволяет указать диапазон лет, отображаемых в раскрывающемся списке. Можно указать относительные значения (например, "-30:+1") или абсолютные (например, "1970:2009"). Раскрывающийся список будет доступен, если опция changeYear имеет значение true. Значение по умолчанию — "-10:+10".
numberOfMonths — количество одновременно показываемых месяцев. В качестве значения может быть указано число или массив из двух элементов. Например, число 3 означает, что необходимо вывести календарь на три месяца (результат изображен на рис. 12.10). При указании массива в первом элементе указывается количество строк, а во втором — количество показываемых месяцев в строке. Например, массив [2,3] означает следующее: вывести календарь в две строки по три месяца на строке (результат изображен на рис. 12.11). Значение по умолчанию — 1.

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

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

stepMonths — количество месяцев, на которое сдвигается календарь после щелчка на кнопках со стрелками влево и вправо, предназначенными для перемещения по месяцам. Значение по умолчанию — 1.
showCurrentAtPos — смещение текущего месяца относительно левого верхнего угла при отображении календаря сразу на несколько месяцев. Значение по умолчанию — 0. Отобразим текущий месяц вторым из трех отображаемых.

$("#datepicker").datepicker({
   numberOfMonths: 3,
   showCurrentAtPos: 1
});

showOtherMonths — если указано значение true, то на календаре будут отображаться номера дней предыдущего и следующего месяцев без возможности их выбора. Значение по умолчанию — false.
showMonthAfterYear — если указано значение true, то в заголовке календаря название месяца будет следовать после года. Значение по умолчанию — false.
defaultDate — позволяет задать дату, которая будет подсвечена при первом открытии календаря. Значение по умолчанию — null (текущая дата).
maxDate — позволяет задать максимально возможную для выбора дату. Значение по умолчанию — null (ограничение отсутствует).
minDate — позволяет задать минимально возможную для выбора дату. Значение по умолчанию — null (ограничение отсутствует). В опциях defaultDate, maxDate и minDate дату можно указать следующими способами.

Объект Date. Ограничим минимальную дату первым числом марта 2009 года.

minDate: new Date(2009, 2, 1)

Количество дней относительно текущей даты.

maxDate: 10
minDate: -10

Строка специального формата, определяющая период. Могут быть указаны следующие периоды:

y — год (например, minDate: "-1y");
m — месяц (например, maxDate: "+1y +5m");
w — неделя (например, minDate: "-12w");
d — день (например, maxDate: "+10d").

hideIfNoPrevNext — если указано значение true, то при достижении края диапазона дат, значок, предназначенный для перемещения по месяцам, будет скрыт. Значение по умолчанию — false (значок становится неактивным).
showOn — действие, которое будет приводить к отображению календаря. Могут быть указаны следующие значения:

focus — при получении фокуса полем ввода (значение по умолчанию);
button — при щелчке на кнопке;
both — при получении фокуса полем ввода, а также при щелчке на кнопке.

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

buttonText — позволяет задать текст на кнопке, с помощью которой можно отобразить календарь. Кнопка будет доступна, если в опции showOn указаны значения button или both. Значение по умолчанию — "...".
buttonImage — URL-адрес изображения, которое будет отображаться на кнопке (или вместо нее), с помощью которой можно отобразить календарь. Кнопка будет доступна, если в опции showOn указаны значения button или both. Если в опции buttonText был определен текст, то он становится значением параметра alt. Значение по умолчанию — "".
buttonImageOnly — если указано значение true, то для отображения календаря будет использоваться изображение вместо кнопки. Значение по умолчанию — false.
appendText — позволяет задать текст, который будет отображаться после текстового поля, служащего для выбора даты. Значение по умолчанию — "".
altField — позволяет задать дополнительное поле, которое должно быть обновлено, после выбора даты. В качестве значения указывается селектор jQuery. Значение по умолчанию — "".
altFormat — формат для вывода даты в дополнительном текстовом поле, ссылка на который указана в опции altField.

Определить значения опций по умолчанию для всех календарей позволяет метод $.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 и некоторых других опциях, задающих формат отображения даты, может быть использована комбинация следующих служебных символов:

d — номер дня месяца без предваряющего нуля (например, 1.07.2009);
dd — номер дня месяца с предваряющим нулем (например, 01.07.2009);
o — день с начала года без предваряющих нулей (например, 5);
oo — день с начала года с предваряющими нулями (например, 005);
D — короткое название дня недели (например, "срд" для среды), названия задаются с помощью опции dayNamesShort;
DD — полное название дня недели (например, "среда"), названия задаются с помощью опции dayNames;
m — номер месяца без предваряющего нуля (например, 1.7.2009);
mm — номер месяца с предваряющим нулем (например, 1.07.2009);
M — короткое название месяца (например, "Июл" для июля), названия задаются с помощью опции monthNamesShort;
MM — полное название месяца (например, "Июль"), названия задаются с помощью опции monthNames;
y — год из двух цифр (например, 01.07.09);
yy — год из четырех цифр (например, 01.07.2009);
@ — количество миллисекунд, прошедших с 1 января 1970 г. (например, 1248811200000);
'...' — если в шаблоне необходимо вывести текст, содержащий специальные символы, то его необходимо заключить в одинарные кавычки (например, шаблон "'date:' dd.mm.yy" будет соответствовать выводу "date: 29.07.2009");
'' — если в шаблоне необходимо вывести одинарную кавычку, то ее следует удвоить.

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

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

$.datepicker.ATOM — соответствует шаблону "yy-mm-dd"
$.datepicker.COOKIE — соответствует шаблону "D, dd M yy"
$.datepicker.ISO_8601 — соответствует шаблону "yy-mm-dd"
$.datepicker.RFC_822 — соответствует шаблону "D, d M y"
$.datepicker.RFC_850 — соответствует шаблону "DD, dd-M-y"
$.datepicker.RFC_1036 — соответствует шаблону "D, d M y"
$.datepicker.RFC_1123 — соответствует шаблону "D, d M yy"
$.datepicker.RFC_2822 — соответствует шаблону "D, d M yy"
$.datepicker.RSS — соответствует шаблону "D, d M y"
$.datepicker.TIMESTAMP — соответствует шаблону "@"
$.datepicker.W3C — соответствует шаблону "yy-mm-dd"

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

dialog — открывает календарь в режиме диалогового окна. Формат метода:

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

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

setDate — позволяет выбрать дату в календаре. Формат метода:

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

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

с помощью объекта Date;
посредством количества дней относительно текущей даты (например, 7 или –12);
с помощью строки специального формата, определяющей период. Могут быть указаны следующие периоды:

y — год (например, "-1y");
m — месяц (например, "+1y +5m");
w — неделя (например, "-12w");
d — день (например, "+10d");

значение null — текущая дата.

getDate — возвращает дату (объект Date), выбранную в календаре. Если дата не выбрана, то возвращается значение null.
show — показывает календарь.
hide — скрывает календарь.
disable — временно запрещает использование календаря.
enable — разрешает использование календаря, если ранее оно было запрещено с помощью метода disable.
isDisabled — возвращает true, если использование календаря было запрещено с помощью метода disable, и false — в противном случае.
destroy — удаляет календарь и возвращает все элементы в первоначальное состояние.

Пример использования различных методов приведен в листинге 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({
   <Событие>: <Функция обратного вызова>
});

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

beforeShow — наступает перед открытием календаря. Указывается ссылка на функцию следующего формата.

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

beforeShowDay — наступает для каждой даты перед отображением календаря. Указывается ссылка на функцию следующего формата.

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

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

0 — значение true, если можно выбрать дату, или false — в противном случае;
1 — имя класса (или классов) для даты;
2 — текст всплывающей подсказки.

onChangeMonthYear — при смене месяца или года в календаре. Указывается ссылка на функцию следующего формата.

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

onSelect — при выборе даты в календаре.
onClose — после закрытия календаря (вне зависимости от того, выбрана дата или нет).

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

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

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

id — идентификатор поля ввода, являющегося основой для календаря;
input — ссылка на поле ввода;
selectedDay, selectedMonth, selectedYear — день, месяц (нумерация начинается с нуля) и год, которые были выделены;
currentDay, currentMonth, currentYear — день, месяц (нумерация начинается с нуля) и год, которые были выбраны пользователем; если дата не была выбрана, то эти свойства имеют значение 0.

Пример обработки различных событий приведен в листинге 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() — позволяет вывести дату в указанном формате. Формат функции:

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

Пример:

alert($.datepicker.formatDate("dd.mm.yy", new Date(2009, 6, 29)));
// Выведет: 29.07.2009

$.datepicker.parseDate() — производит разбор даты, представленной в виде строки, согласно указанному формату. Возвращает объект Date. Формат функции:

$.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() — возвращает номер недели в году по указанной дате. Формат функции:

$.datepicker.iso8601Week(<Объект Date>)

Пример:

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

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

dayNames — массив с полными названиями дней недели (начиная с воскресенья);
dayNamesShort — массив с названиями дней недели из трех букв (начиная с воскресенья);
monthNames — массив с полными названиями месяцев;
monthNamesShort — массив с названиями месяцев из трех букв.

Кроме того, в функции $.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

Библиотека jQuery UI

Помощь сайту

Yandex-деньги: 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

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

Помощь сайту

Поиск по сайту в Яндексе