Lecaw

Учимся создавать Web-сайты

Datepicker | jQuery UI

June 20, 2013 302hits

Если Вы не знакомы с jQuery UI и ищете способ добавить DatePicker jQuery на свой сайт, то следует прочитать данную статью, где мы расскажем о добавлении и настройке DatePicker jQuery. Статья достаточно проста для тех, кто уже знаком с данной библиотекой, но также это будет очень полезно для начинающих. В этом руководстве присутствуют несколько иллюстративных примеров, с которыми Вы можете поэкспериментировать онлайн.

 

Во-первых, вам необходимо скачать библиотеку jQuery здесь. Откройте файл html и добавьте туда следующих код:

<!-- add styles -->
<link href="#" rel="stylesheet" type="text/css" />
<!-- add scripts -->
<script src="/js/jquery.191.js"></script>
<script src="/js/jquery-ui-1.9.2.custom.min.js"></script>

Пожалуйста, обратите внимание на то, что необходимо разместить все файлы из JQuery UI в соответствующие папки (давайте закинем все JS файлы в папку «JS» и CSS файлы в папку «CSS»). Таким образом, мы связали все необходимые библиотеки и стили, например как на сайте где вы можете сделать оригинальный подарок. Теперь добавим календарь, в код нам нужно добавить одну строку:

<input id="datepicker" type="text" />

Кроме того, можно добавить это как inline-object. В этом случае нам не нужно указывать параметры «type»:

<div id="datepicker"></div>

Наконец, для завершения инициализации DatePicker jQuery, давайте добавим код JS:

<script>
$(function(){
  $.datepicker.setDefaults(
    $.extend($.datepicker.regional[''])
  );
  $('#datepicker').datepicker();
});
</script>

ДЕМО 1

 

 

 

По умолчанию, основной интерфейс на английском языке. Но, Вы легко можете изменить его с помощью данной опции, скажем на немецкий язык:

$('#datepicker').datepicker('option', $.datepicker.regional['de']);

ДЕМО 2

 

 

 

Также вы можете добавить параметры для функций minDate и maxDate:

$('#datepicker').datepicker({
  minDate: '-30', // The min date that can be selected, i.e. 30 days from the 'now'
  maxDate: '+1m +1w +1d' // The max date that can be selected, i.e. + 1 month, 1 week, and 1 days from 'now'
});

ДЕМО 3

 

 

 

События

Данный пример показывает, как Вы сможете добавить события:

$.datepicker.setDefaults($.extend(
  $.datepicker.regional[''])
);
$('#datepicker').datepicker({
  beforeShow: function(input) {
    $(input).css('background-color','#ff0');
  },
  onSelect: function(dateText, obj) {
    $(this).css('background-color','');
    alert('Selected: ' + dateText +
      "id: " + obj.id +
      "\nselectedDay: " + obj.selectedDay +
      "\nselectedMonth: " + obj.selectedMonth +
      "\nselectedYear: " + obj.selectedYear);
  },
  onClose: function(dateText, obj) {
    $(this).css('background-color','');
  }
});

ДЕМО 4

 

 

 

Существует 3 обработчика событий:

beforeShow – данная функция показывается перед календарем. С помощью CSS input, календарь будет установлен на желтом фоне;

onSelect – функция срабатывает в случае выбора даты, сравнивает значение этой даты с другими, при этом затемняется задний фон;

onClose – функция срабатывает при закрытии календаря.

Методы

<a id="datepicker_open">Open in a window</a>
$(function(){
    $.datepicker.setDefaults(
        $.extend($.datepicker.regional[''])
    );
    $('#datepicker_open').click(function(){
        $('#datepicker').datepicker(
            'dialog',
            '28.05.2013',
            function(){
                alert('Event onSelect');
            },
            { showButtonPanel: true }
        );
    });
});

ДЕМО 5

 Исходные файлы

 

 

Этот пример демонстрирует метод dialog. Когда мы нажимаем на ссылку, она вызывает функцию. Первым аргументом является название метода, вторым аргумент TextDate - по умолчанию дата, на которую открываем календарь. С помощью аргумента onSelect мы можем установить обратную функцию вызова, которая будет вызываться, если выбрана определенная дата в календаре. В аргументе settings можно определить объект с новыми настройками виджета, которые можно было бы применить к календарю.

altField - JQuery селектор для другой области, которые должны быть обновлены, когда выбрана дата из Datepicker jQuery. Формат даты в этом дополнительном поле установлен с возможностью altFormat.

altFormat - формат даты, которая будет использоваться для варианта altField. Эти настройки позволяют пользователю увидеть один формат даты, в то время как для расчетов будет использоваться другой формат. Полный список форматов можно найти здесь http://docs.jquery.com/UI/Datepicker/formatDate

AppendText - текст, который отображается после каждого поля ввода даты. Может быть использован, например, для обозначения поля, по мере необходимости.

buttonImage - всплывающее изображение кнопки, которое может быть использовано для вызова календаря. Используется в сочетании с showOn, когда оно имеет значение "button" или "both". Если текст был установлен в опции ButtonText, то значение атрибута Alt не отображается.

buttonImageOnly - если эта опция true, то изображение, адрес которого определен в опции buttonImage, появится не на кнопке, а само по себе и будет работать в качестве триггера.

ButtonText - текст, который будет отображаться на кнопке, которую Вы нажимаете для вызова календаря. Используйте данную функцию в сочетании с showOn, если оно имеет значение "button" или "both".

changeMonth - если эта опция включена, установив значение как true, Вы сможете выбрать месяц из выпадающего списка.

changeYear - если эта опция включена, установив значение как true, Вы сможете выбрать год из выпадающего списка.

closeText - эта опция используется в сочетании с showButtonPanel, если последняя установлена в значении true. Значение опции closeText определяется в файле локализации, если он используется, но это значение можно переопределить, указав его.

constrainInput - по умолчанию эта опция установлена в значении true и ограничивает формат даты, определенные в опциях виджета в поле ввода. Если Вас это не устраивает, то установите для параметра значение False.

currentText - используется в сочетании с showButtonPanel, если последние установлено в значение true. Значение опции currentText определяется в файле локализации, если он используется. Значение можно переопределить.

DateFormat - определяет формат даты. Значение DateFormat вариант определяется в файле локализации, если он используется, также его значение можно переопределить. Полный список всех форматов можно найти здесь http://docs.jquery.com/UI/Datepicker/formatDate

dayNames - массив, содержащий длинные названия дней недели, начиная с воскресенья. Определен в файле локализации, если он используется, то его значение можно переопределить.

dayNamesMin - массив минимизирован до двух символов названия дней недели, начиная с воскресенья. Определен в файле локализации, если он используется, то его значение можно переопределить.

dayNamesShort - массив минимизирована до трех символов названия дней недели, начиная с воскресенья. Определен в файле локализации, если он используется, то его значение можно переопределить.

defaultDate - задает дату, которая будет выделена при первом открытии. Опция может быть указана через объект Date, то есть сколько дней прошло от текущего дня (например, +7 или -15), или более подробно с использованием лет, месяцев, недель или дней ("Y" в течение многих лет, "M" в течение месяцев, "W" в течение недель, "D" в течение нескольких дней, например, "+1 м +7 D"), и, наконец, просроченный на текущий день.

duration - продолжительность эффекта анимации при открытии (закрытии) календаря. Может иметь значения скорости в строке - " fast", " normal" (по умолчанию), " slow" или времени число в миллисекундах. Если оставить пустую строку, то календарь будет открываться и закрываться без анимационных эффектов.

FirstDay - задает первый день недели: воскресенье - 0, понедельник – 1 и т.д. определенные в файле локализации, если он используется, то его значение можно переопределить.

gotoCurrent - если эта опция установлена значение true, то кнопка " Today" (только если showButtonPanel установлено в значение TRUE) укажет на выбранную дату, а не текущего.

hideIfNoPrevNext - ограничивает диапазон доступных дат с вариантами MinDate MaxDate и, затем, когда вы дойдете до конца диапазона, стрелки "Back" и " Forward" будут отключены. Также их можно полностью скрыть, путем установки опции hideIfNoPrevNext к значению true.

isRTL - эта опция должна быть установлена в значение true, только если в используемом языке пишут справа-налево. Определен в файле локализации, значение можно переопределить.

MaxDate - устанавливает максимально возможную дату выбираемых через объект Date, то есть количество дней от текущего дня (например, +7), или в виде функции определяющей период ("Y" в течение многих лет, "M" для месяцев, "W" в течение недель, "D" в течение нескольких дней, например, "+1 Y +1 D").

MinDate - устанавливает минимальные возможную дату выбираемых через объект Date, то есть количество дней от текущего дня (например, -7), или в виде функции определяющей период ("Y" в течение многих лет, "M" в течение нескольких месяцев ", W "в течение недель," D "в течение нескольких дней, например,"-1Y-1М ").

monthNames - массив, содержащий длинные имена месяц. Определен в файле локализации, если он используется, то его значение можно переопределить.

monthNamesShort - массив сокращенные названия месяцев до трех символов. Определен в файле локализации, если он используется, то его значение можно переопределить.

navigationAsDateFormat - по умолчанию опция установлена в значение False. Если же поменять значение на true, то функция DateFormat будет применяться к значениям параметров nextText, prevText и currentText и для того, чтобы отобразить названия предыдущего и следующего месяца при навигации.

nextText – текст, отображающийся в виде ссылки на следующий месяц. Определен в файле локализации, если он используется, то его значение можно переопределить. Если вы используете таблицы стилей ThemeRoller, то значение заменяется на картинку.

numberOfMonths - Эта опция устанавливает количество месяцев, показывающихся одновременно. Значение параметра может быть либо целым числом либо массивом, состоящим из двух элементов, которые определяют число строк и столбцов, соответственно. Например, с помощью двух элементов [2, 3] календарь будет отображаться в два ряда, каждый из которых имеет три месяца.

prevText - текст, отображаемый в качестве связующего звена с предыдущим месяцем. Определен в файле локализации, если он используется, то его значение можно переопределить. Если вы используете таблицы стилей ThemeRoller, то значение заменяется на картинку.

shortYearCutoff - по умолчанию +10. Эта опция используется только тогда, когда вы используете в DateFormat две цифры в формате года и служит связующим для определения века. Если значение выполнено в виде числа, то она используется. Если значение обеспечивается в виде строки, то сначала строка преобразуется в число, а потом только добавляется к текущему году.

showAnim - определяет тип анимации при открытии календаря. По умолчанию используется при закрытии. Без дополнительных файлов, Вы можете использовать данные эффекты "slideDown" и "FadeIn" (используются при закрытии "slideUp" и "fadeout"). Вы также можете использовать любые эффекты в Jquery U, только если используете дополнительные файлы.

showCurrentAsPos - при отображении нескольких месяцев, по номеру, указанному в этой опции определяет положение текущего месяца. По умолчанию установлено значение 0, а текущий месяц отображается в верхнем левом углу.

showButtonPanel - установив значение true для этого параметра заставит панель отображаться в две кнопки - " jump to current date" и " closing the calendar".

showMonthAfterYear - по умолчанию установлено значение false и название заголовка месяца идет перед названием года. Если установлено значение true, то название месяца будет после названия года.

showOn - по умолчанию эта опция установлена в значении " focus", это заставляет календарь появляться при нажатии в поле ввода. Другие возможные значения - " button" и " both". Рядом с полем ввода появится кнопка. В случае " button", календарь будет открыт при нажатии на кнопку, в случае " both " при нажатии на кнопку Вы также, получите фокус на поле ввода.

showOptions - если вы используете один из эффектов JQuery UI, то с помощью этой опции можно обеспечить дополнительные настройки для анимации. Например: showOptions: { direction: “up”}.

showOtherMonths - по умолчанию установлено в значении false. Если установить в значение true, то на календаре будут отображаться дни прошлого и/или следующего месяца.

stepMonths - установить, сколько месяцев перелистывается в календаре, когда нажимаете на кнопки " Next " и " Previous ". По умолчанию это 1 месяц.

yearRange - определяет, как много лет для отображения в выпадающем списке (только если используется опция changeYear).

События

beforeShow - здесь вы можете определить функцию, которая будет вызвана перед открытием календаря. Функция принимает в качестве аргумента объект, описывающий поле ввода в котором работает виджет.

beforeShowDay - с помощью этой опции Вы можете установить собственную функцию, которая принимает выбранную дату в качестве аргумента. Эта функция должна возвращать массив, в котором элемент с индексом, равным [0] - true или false указывает, является ли выбор этой даты возможным. Элемент с индексом [1] содержит имя класса (-ов) для отображения даты. Элемент с индексом [2] (по желанию) - всплывающие подсказки для даты. Функция будет вызываться для каждой даты в календаре, если навести над ней курсор мыши.

onChangeMonthYear - здесь Вы можете задать функцию, которая будет вызываться каждый раз при смене месяца или года в календаре. Функция имеет три аргумента. Первые два аргумента - это новый год и месяц, третий аргумент - DatePicker объекта.

OnClose - с помощью этой опции Вы можете определить функцию, которая будет вызываться, если календарь был закрыт без выбранной даты.

onSelect - опция определяет функцию, которая будет вызываться, если любая дата выбрана в календаре.

Методы

destroy – .datepicker(“destroy”) удаляет полностью функциональные возможности виджета Datepicker jQuery. Возвращает элементы в предварительной инициализации состояния.

disable - .datepicker(“disable”) временно отключает все функциональные возможности виджета. Чтобы снова включить его, используйте метод включить.

enable – .datepicker(“enable”) позволяет использовать всю функциональность виджета, если она была отключена перед методом отключения.

option – .datepicker(“option”, optionName, [value]) с помощью этого метода можно получить или установить значение любой опции виджета после инициализации.

dialog – .datepicker(“dialog”, dateText, [onSelect], [settings], [pos]) открывает Datepicker в диалоговом режиме. В аргументе dateText предоставляется дата, на которой календарь открыт. Другие аргументы являются необязательными. В аргументе OnSelect функция будет вызвана при выборе даты, в аргументе settings можно перейти в настройки нового виджета, в аргументе pos – скоординировано поле диалога, которое будет открыто. Вы можете использовать мышь для определения координат.

isDisabled – .datepicker(“isDisabled”) Метод возвращает true виджету, если до этого он был отключен или имел значение false.

hide – .datepicker(“hide”, [speed]) скрывает ранее открытый календарь.

show – .datepicker(“show”) открывает календарь.

getDate – .datepicker(“getDate”) Метод возвращает дату, которая была выбрана в календаре.

setDate – .datepicker(“setDate”, date) метод позволяет установить дату в календаре. Значение аргумента дата может быть строкой (например: 04.07.1991).

ДЕМО 5

 Исходные файлы

 

Дополнительная информация

Роман Воеводин

Воеводин Роман - дизайнер, модератор, соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(2 голосов)

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