Опубликовано admin - вт, 05/01/2018 - 23:02
datepicker(options) → jQuery

jQuery UI Datepicker очень перестраиваемый плагин, который позволяет отмечать время на ваших страницах. Вы можете самостоятельно настроить формат даты и язык, ограничивать выбор временными рамками и добавлять элементы кнопок и выбирать любую другую навигацию.
По умолчанию, календарь открывается в маленьком слое по событию onFocus и закрывается автоматически по событию onBlur или когда дата будет выбрана. Для того чтобы вывести календарь, просто присоедините его к элементам div или span.
Вы можете использовать клавиши, чтобы управлять календарём:
• page up/down - предыдущий/следующий месяц
• ctrl+page up/down - предыдущий / следующий год
• ctrl+home – текущий месяц или открытие, если он закрыт
• ctrl+left/right - предыдущий / следующий день
• ctrl+up/down - предыдущая/ следующая неделя
• enter – вводить выбранную дату
• ctrl+end – закрыть календарь и стереть дату
• escape – закрыть календарь без выбора даты

Поелезные функции
• $.datepicker.setDefaults( settings ) – Установливает настройки календаря для всех примеров.
• $.datepicker.formatDate( format, date, settings ) – формат данных в строковой переменной на основе определённого формата.
• $.datepicker.iso8601Week( date ) – определяет неделю года, определяемой от 1 до 53.
• $.datepicker.parseDate( format, value, settings ) – извлекает дату из строковой переменной на оснвое определенного формата.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jquery-ui-1.7.2.custom.css" 
rel="stylesheet" type="text/css"/>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-1.3.2.min.js"></script>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-ui-1.7.2.custom.min.js"></script>  
<script>
  $(document).ready(function(){

	$(function() {
		$("#datepicker").datepicker();
	});

  });
</script>

</head>
<body class="iframe">


<div class="demo">

<p>Date: <input id="datepicker" 
type="text"></p>

</div><!-- End demo -->

<div style="display: none;" class="demo-description">

<p>The datepicker is tied to a standard form input field.  
Focus on the input (click, or use the tab key) 
to open an interactive calendar in a small overlay. 
 Choose a date, click elsewhere on the page (blur the input), 
 or hit the Esc key to close. If a date is chosen,
 feedback is shown as the input's value.</p>

</div><!-- End demo-description -->


</body>
</html>

Опция: altField


Опция: altFormat


Опция: appendText


Опция: buttonImage


Опция: buttonImageOnly


Опция: buttonText


Опция: changeMonth


Опция: changeYear


Опция: closeText


Опция: constrainInput


Опция: currentText


Опция: dateFormat


Опция: dayNames


Опция: dayNamesMin


Опция: dayNamesShort


Опция: defaultDate


Опция: duration


Опция: firstDay


Опция: gotoCurrent


Опция: hideIfNoPrevNext


Опция: isRTL


Опция: maxDate


Опция: minDate


Опция: monthNames


Опция: monthNamesShort


Опция: duration


Опция: navigationAsDateFormat


Опция: nextText


Опция: numberOfMonths


Опция: prevText


Опция: shortYearCutoff


Опция: showAnim


Опция: showButtonPanel


Опция: showCurrentAtPos


Опция: showMonthAfterYear


Опция: showOn


Опция: showOptions


Опция: showCurrentAtPos


Опция: showOtherMonths


Опция: stepMonths


Опция: yearRange


Событие: beforeShow

Событие: beforeShowDay

Событие: onChangeMonthYear

Событие: onClose

Событие: onSelect

Метод: destroy

Метод: disable

Метод: enable

Метод: option

Метод: dialog

Метод: isDisabled

Метод: hide

Метод: show

Метод: getDate

Метод: setDate

Используемая тема jQuery UI

Плагин jQuery UI Datepicker использует jQuery UI CSS структуру для придания стиля, включающую цвета и фоновые текстуры. Мы рекомендуем использовать инструмент ThemeRoller для создания и загрузки тем, которые легко встраиваются и поддерживаются. Если нуждается более гдубокий уровень настройки, сущетсвует особый виджет классов ссылающийся на ui.draggable.css лист стилей, который может быть модифицирован. Данный класс подчеркнут жирным ниже.

Образец разметки jQuery UI CSS струтктуры классов

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible">
   <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
      <a class="ui-datepicker-prev ui-corner-all">title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>
      <a class="ui-datepicker-next ui-corner-all" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>
      <div class="ui-datepicker-title">
         <span class="ui-datepicker-month">January</span><span class="ui-datepicker-year">2009</span>
      </div>
   </div>
   <table class="ui-datepicker-calendar">
      <thead>
      <tr>
         <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
         ...
      </tr>
      </thead>
      <tbody><tr>
         <td class="ui-datepicker-week-end ui-datepicker-other-month "> 1 </td>
         ...
      </tr>
      </tbody>
   </table>
   <div class="ui-datepicker-buttonpane ui-widget-content">
      <button type="button" class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all">Today</button>
      <button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all">Done</button>
   </div>
</div>
Примечание: Данный образец разметки создан посредством плагина datepicker, это не разметка для того чтобы создать календарь. Для этого достаточно следующей разметки <input type="text" /> или <div></div>.

На разработку сайта! Скидки до 20%!