Jquery ui datepicker


Ромчик

datepickerДоброго времени суток. На днях столкнулся с проблемой — пользователь в input должен указать дату в определенном формате. Не долго ломая голову решил сделать так, чтобы при нажатии на input появлялся календарь. Реализовать это не сложно, но зачем? Если есть замечательный виджет календаря на jQuery — datepicker. Дальше речь и пойдет об установке, настройке и подключения datepicker.

 

Для начала я приведу наглядный пример того, что я хочу сделать:

Пример работы datepicker

Ну, и понятно, что после выбора даты календарь исчезает, а в текстовом поле появляется выбранная дата.
Приступим к реализации.

Установка и подключение календаря — виджета Datepicker.


Заходим на официальный сайт jQueryUI. Чтобы ничего лишнего не качать — жмем “Deselect all components”

Снимаем выделение со всех виджетов

И выбираем “Core”:

Выбор ядра jQuery

Это сам jQuery. Дальше выбираем необходимый виджет, в нашем случае это “Datepicker”:

Выбор виджета datapicker

 

На этом в принципе все. Но у данного виджета есть предустановленные отображения (темы)
В правом верхнем углу Вы можете выбрать подходящую тему, выбрать версию виджета и нажать “Download”:

Выбор темы и версии виджета

На следующем этапе распаковываем архив.
Давайте сразу договоримся о структуре нашей страницы:

  1. Папка css — тут хранятся  стили для страницы
  2. Папка js — тут хранятся  javascript для страницы
  3. Файл index.php — файл нашей страницы

Теперь файлы jquery-1.8.0.min.js и jquery-ui-1.8.23.custom.min.js из скачанного архива помещаем в папку js.   Теперь папку с названием темы для datepicker (в моем случае это ui-lightness) из папки css скачанного архива помещаем в папку css для нашей страницы. На этом установка календаря — виджета jQuery Datepicker закончена.
Давайте приступим к подключению Datepicker. Как я уже говорил, что я хочу вызывать календарь по клику на текстовом поле. Добавим к нашему input id=”datepicker” для того, чтобы мы могли с легкостью к нему обратиться.

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

Теперь напишем небольшой скрипт на jQuery, который будет вызывать календарь при клике по данному тестовому полю:

  <script type="text/javascript">          $(function(){              $("#datepicker").datepicker();         });      </script>  

Сохраняем и проверяем.

Настройка календаря — виджета на jQuery Datepicker.


Первое, что настроим это тему для нашего календаря. Ниже я приведу таблицу с названием темы для Datepicker и ее отображение:

Как видите тем достаточно, чтобы выбрать подходящую, но если по каким-либо причинам Вы не нашли такую тему, то Вы запросто можете изменить одну из стандартных путем изменения файла стилей для datepicker.
На этом настройки datepicker не заканчиваются и при вызове функции datepicker мы можем передать дополнительные параметры:

Тут я привел только основные параметры, которые могут Вам пригодиться. Если Вы хотите увидеть полный список параметров, то вперед к официальной документации
Теперь давайте остановимся на значениях, которые принимает параметр dateFormat

Вот теперь все.
Мы с Вами рассмотрели установку, подключение и настройку одного из замечательных виджетов jQuery — виджет календаря datepicker.
Надеюсь, что статья Вам понравилась. Если у Вас возникли вопросы, то пишите в комментариях.
А на этом я с Вами прощаюсь и удачной web-разработки.

web-programming.com.ua

The jQuery UI DatePicker is probably the most widely-used widgets, yet the most under utilized. It comes with a huge number of configurable options and a range of utility functions that you can use to customize the widget the way you want.


The DatePicker has an easy to use interface for selecting date. It is tied to a simple text field which when focused on by clicking or by using tab key, presents an interactive calendar like interface to the user, allowing a date to be selected. If a date is chosen, the date is then inserted into the text field.

 

Create a new file ‘datepicker.html’ in a folder. Here’s how to write the HTML code and call the datepicker() method in the <script> tag.

  <html>  <head>   <title>DatePicker Example</title>   <link href="../css/jquery-ui.css" rel="stylesheet" />   <script src="../scripts/jquery-1.11.1.min.js"></script>   <script src="../scripts/jquery-ui.min.js"></script>   <script>   $(function () {   $("#datep").datepicker();   });   </script>  </head>  <body>   <h3>Click to select a date :</h3>   <input type="text" id="datep" />  </body>  </html>    

Here we are using an <input> element with id=date and binding the datepicker() widget to this input text field. The datepicker will automatically be positioned below the input field when a user clicks it. The calendar will be hidden when the user clicks outside. If the user chooses a date, the date will then be displayed in the input field:


Live Demo: http://www.jquerycookbook.com/demos/S9-General/67-datepicker.html

jQuery UI Datepicker offer a large set of options and methods. For a full list, see: http://api.jqueryui.com/datepicker/

Note: Do not use the HTML5 type="date" attribute in your <input> statements when using jQuery UI DatePicker as it causes conflicts

Let us see some practical examples of using the datepicker widget.

1 — Disable the Selection of some days

A typical requirement is to disable the selection of some days in the date picker. To accomplish this, we can use the beforeShowDay callback function which is called for each day in the date picker, before it is displayed. This function takes a date as a parameter, and returns values to indicate if the date is selectable; the class name to add to the date’s cell, and an optional pop-up tooltip for this date.

Create a new file ’1-datepicker.html’. Let’s add some styling to the disabled day that sets the border to red

  <style type="text/css">   td.redday, table.ui-datepicker-calendar tbody td.redday a {   background: none !important;   background-color : red !important;   background-image : none !important;   color: White !important;   font-weight: bold !important;   font-size: 12pt;   }  </style>    

And the script where we will use the beforeShowDay callback to disable a day of our choice:


  <script type="text/javascript">   var disabledTool = new Date();   disabledTool.setDate(disabledTool.getDate() - 2);   disabledTool.setHours(0, 0, 0, 0);     $(function () {   $("#datepicker").datepicker({   beforeShowDay: function (date) {   var tooltipDate = "This date is DISABLED!!";   if (date.getTime() == disabledTool.getTime()) {   return [false, 'redday', tooltipDate];   } else {   return [true, '', ''];   }   }   });   });  </script>    

Since the beforeShowDay function is called for every day in the date picker, we check to see if the date matches the date set in the disabledTool variable. If it does, we return three values: false to indicate date is not selectable, the css class name and the tooltip, as shown here:

  return [false, 'redday', tooltipDate]  

For all the dates that do not match, we are returning true which indicates the date is selectable, no css is to be applied and there are no tooltips.

  return [true, '', '']  

View the page in the browser and open the datepicker. This screenshot is taken on July 27th and in this example, we have set the day before yesterday as disabled, i.e. 25th of July, with a custom css class that sets the day border in red and with a tooltip that states “This date is DISABLED!!”


s12-datepicker-beforeday

Live Demo: http://www.jquerycookbook.com/demos/S9-General/67.1-datepicker.html

2 — Disable the Selection of Weekends

Similar to the previous example, we can disable the weekend days using the beforeShowDay option by passing a shorthand function $.datepicker.noWeekends that automagically disables the week end days without any other code needed.

Create a new file ’2-datepicker.html’. Use the following code:

  <script type="text/javascript">   $(function () {   $("#datepicker").datepicker({   beforeShowDay: $.datepicker.noWeekends   });   });  </script>    

View the page in the browser and you will observe that the weekends are disabled.

s12-datepicker-disableweekend


Live Demo: http://www.jquerycookbook.com/demos/S9-General/67.2-datepicker.html

3 — Display a Month-Year picker

If you want to display only the month/year selection, you can do so with a little hack:

Create a new file ’3-datepicker.html’. First use this CSS to hide the calendar display using display: none on .ui-datepicker-calendar element

  <style type="text/css">   .ui-datepicker-calendar {   display: none;   }  </style>    

Now let’s see some code:

  <script type="text/javascript">   $(function() {   $('#datepicker').datepicker( {   changeMonth: true,   changeYear: true,   showButtonPanel: true,   dateFormat: 'MM yy',   onClose: function(dateText, inst) {    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();   var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();   $(this).datepicker('setDate', new Date(year, month, 1));   }   });   });  </script>    

We are setting the individual configurable options as follows:

  • changeMonth: true to show the month change dropdown
  • changeYear: true to show the year change dropdown
  • showButtonPanel: true to shows a panel of buttons consisting of close and current links
  • dateFormat: to parse and display date in the ‘MM yy’ format

In the onClose event, we get the current selected month and year and set the value in the input text field.

View the file in a browser and this is what you get:

s12-datepicker-monthyearselect

Live Demo: http://www.jquerycookbook.com/demos/S9-General/67.3-datepicker.html

4 — Display a Hidden DatePicker

A hidden datepicker can be useful in scenarios especially where the date picker on an HTML element can’t be bound. For example when we want to display a datepicker by clicking a radio button.

To achieve this requirement, we can setup a hidden date picker and then display it when the user clicks the radio button. In the onSelect event of the date picker, we can then set the date.

Create a new file ’4-datepicker.html’. Here’s some HTML that defines a bunch of radiobuttons and a datepicker

  <body>   <span>   <input type="radio" id="radio1" name="radios" value="" />   <label f.  

quot;>Other</label> </span> </body>

Use CSS to hide the datepicker when the page loads:

  <style type="text/css">   #customDatePicker {   display: none;   }  </style>    

And finally the code that displays the datepicker:

  $(function() {   $("#customDatePicker").datepicker({   onSelect: function () {   $("label[for='customStartDate']").text($(this).val());   }   });     $("#customStartDate").on('click', function () {   $("#customDatePicker").datepicker("show");   });  });    

Observe that on the click event of the radiobutton customDatePicker, we display the datepicker and in its onSelect event, we set the chosen date from the datepicker in the label control.

When the page loads, you will see three radio buttons. Click on the ‘Other’ radiobutton.

s12-datepicker-hiddendate-1

A datepicker appears where you can select the date. I am selecting Aug 22nd.

s12-datepicker-hiddendate-2

When you click on 22nd, the date is selected and appears in the label control placed next to the radiobutton

s12-datepicker-hiddendate-3

Live Demo: http://www.jquerycookbook.com/demos/S9-General/67.4-datepicker.html

 

5 — Navigate between Months using external buttons

Sometimes you may need to hide the default navigation buttons that come with the datepicker. Instead you want to use custom buttons that allow the users to navigate between the months. Lets see how to achieve this requirement.

Create a new file ’5-datepicker.html’. Declare a datepicker and two buttons as follows:

  <body>   <div id="datepicker"></div>   <br />   <button id="prev">Previous Month</button>&nbsp;   <button id="next">Next month</button>  </body>    

Add some css to hide the default navigation buttons of the datepicker control

  <style type="text/css">   .ui-datepicker-next, .ui-datepicker-prev {   display: none;   }  </style>    

Add the code that handles the button click to navigate between the months of the datepicker

  <script type="text/javascript">   $(function() {   $('#datepicker').datepicker();     $('#next, #prev').on('click', function (e) {   $('.ui-datepicker-' + e.target.id).trigger("click");   });   });  </script>    

The solution is to trigger a click on the default navigation buttons when the custom buttons are clicked.

Live Demo: http://www.jquerycookbook.com/demos/S9-General/67.5-datepicker.html

6 — Programmatically Change the Selectable dates

In a previous example (1) , we saw how to disable certain dates. Let us assume at runtime, we want to programmatically change the dates that are selectable. In our example, we will start by disabling all Tuesdays. Then on a button click, we will change the Selectable dates by disabling all Wednesdays instead of Tuesdays.

Create a new file ’6-datepicker.html’. Let us start by defining our HTML which has a datepicker and a button control:

  <body>   <input type='text' id='datepicker' />   <br />   <br />   <button id="changeDates">Change to Wednesday</button>  </body>    

Code:

  <script type="text/javascript">   $(function () {   var unavailableDay = 2; // disable tuesdays     function disableDays(date) {   var day = date.getDay();   return [(day != unavailableDay), ""];   }     $('#datepicker').datepicker({   beforeShowDay: disableDays   });     $("#changeDates").on('click', function () {   unavailableDay = 3; // disable wednesdays   $("#datepicker").datepicker("refresh");   });   });  </script>    

We start by setting the disable dates to Tuesday. This is done by declaring a variable unavailableDay as 2 (representing Tuesday) and setting it in the beforeShowDay event, which is set to a function disableDays that takes a date as a parameter and returns an array equal to true/false indicating whether or not this date is selectable.

On the button click event, we set unavailableDay as 3 (representing Wednesday) and then use the date picker refresh() method that completely redraws the date picker. Calling the refresh method allows the datepicker to readjust itself, so that it can contain all of the newly added content; in our case, disabling all Wednesdays.

View the file in your browser. Click on the input box to display the datepicker:

s12-datepicker-changedate-1

As you can observe, all the Tuesdays are disabled. Now click on the button below the datepicker (not shown in the screenshot) to change the disabled date to Wednesday. Click on the input box to display the datepicker again:

s12-datepicker-changedate-2

And you will find that the disabled dates have changed from Tuesday to Wednesday.

Live Demo: http://www.jquerycookbook.com/demos/S9-General/67.6-datepicker.html

7 — Custom date format

By default, the date format of the jQuery UI Datepicker is the US format mm/dd/yy, but we can set it to a custom display format, eg: for European dates dd-mm-yyyy and so on.

The solution is to use the date picker dateFormat option.

  $.datepicker.formatDate( format, date, settings )  

Create a new file ’7-datepicker.html’. Define a datepicker control:

  <body>   <input type='text' id='datepicker' />  </body>    

..and use the following code to change the format with the dateFormat option. We have set it to ‘dd-mm-yy’.

  <script type="text/javascript">   $(function () {   $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' });   });  </script>    

View the file in a browser and select a date. You will see that the date displays in dd-mm-yy format.

From the documentation, the format can be of the following combinations: http://api.jqueryui.com/datepicker/#utility-formatDate

Live Demo: http://www.jquerycookbook.com/demos/S9-General/67.7-datepicker.html

www.dotnetcurry.com

Создание виджета Datepicker

Существуют два основных способа создания виджета Datepicker. Чаще всего его присоединяют к элементу input с помощью метода datepicker(). Немедленного изменения внешнего вида элемента при этом не происходит, но как только элемент получит фокус ввода (при выполнении щелчка на нем или переходе к нему от других элементов с помощью клавиши <Tab>), рядом с ним отобразится календарь, с помощью которого можно будет выбрать требуемую дату.

Календари описанного типа называются всплывающими календарями. Пример создания такого календаря приведен ниже:

На рисунке показано, что происходит при перемещении фокуса в поле ввода:

Пользователь может либо ввести дату вручную, либо выбрать ее с помощью календаря. Как только элемент input потеряет фокус или пользователь нажмет клавишу <Enter> (или <Esc>), календарь исчезнет.

Локализация виджета Datepicker

Как вы видите, в показанном примере календарь отображается на английском языке. В виджете jQuery UI Datepicker обеспечена довольно исчерпывающая поддержка различных стандартов форматирования дат, используемых по всему миру, которая включает 61 вариант локализации. Для получения доступа к ним необходимо импортировать в документ один вспомогательный сценарий JavaScript и указать виджету Datepicker, какой вариант локализации должен использоваться. Соответствующий пример приведен ниже:

Файл jquery-ui-i18n.js находится в папке development-bundle/ui/i18n архивного файла библиотеки jQuery UI, который вы должны были загрузить с сайта jqueryui.com. Скопируйте его в ту же папку, в которой находится исходный файл, и добавьте его в документ как показано в коде. Результат представлен на рисунке:

Создание встроенного календаря Datepicker

Второй способ использования виджета Datepicker предполагает его встраивание в документ. Для этого следует выбрать элемент div или span с помощью jQuery и вызвать метод datepicker(). Встроенный календарь отображается все время, пока виден HTML-элемент, на основе которого он создан. Пример создания встроенного календаря приведен ниже:

В этом примере в качестве базового HTML-элемента для создания виджета Datepicker используется элемент span. Результат представлен на рисунке:

Встроенный календарь может быть полезен, если вы не хотите работать с всплывающими объектами. Конечно, существуют приложения, в которых работа с датами ведется настолько интенсивно, что имеет смысл постоянно иметь календарь под рукой. Но в большинстве случаев целесообразно оставлять календарь скрытым до тех пор, пока в нем не возникнет необходимость.

Трудности с сокрытием и отображением встроенного виджета Datepicker обусловлены тем, что его добавление в документ влечет за собой необходимость изменения компоновки страницы, что может порождать проблемы представления. С моей точки зрения, в большинстве ситуаций гораздо удобнее использовать всплывающий виджет.

Настройка виджета Datepicker

Если до этого вам уже приходилось иметь дело с обработкой дат, то вам хорошо известно, насколько сложно работать с этой категорией данных. Отражением этой сложности является многочисленность свойств, поддерживаемых виджетом Datepicker. Описанию групп родственных свойств, с помощью которых настраивается данный виджет, посвящено несколько следующих разделов.

Базовые настройки

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

Базовые свойства виджета Datepicker
Свойство Описание
altField Позволяет задать дополнительное поле, которое будет обновляться при выборе даты в календаре
buttonImageOnly Указывает, что вместо вспомогательной кнопки, позволяющей открыть календарь, должно использоваться изображение, заданное опцией buttonImage
buttonImage Определяет URL-адрес изображения, используемого для вспомогательной кнопки открытия всплывающего календаря. По умолчанию не используется
buttonText Определяет текст, который будет отображаться на кнопке открытия всплывающего календаря. Текстом по умолчанию является многоточие (…)
defaultDate Позволяет установить дату, которая будет подсвечена при открытии календаря
disabled Указывает, должен ли виджет быть первоначально отключен. Значение по умолчанию — false
showOn Определяет действие, инициирующее открытие всплывающего календаря. Значение по умолчанию — focus

Указание даты, используемой по умолчанию

Простейшая настройка одновременно является и наиболее полезной. С помощью опции defaultDate можно указать дату, которая будет автоматически подсвечиваться при открытии календаря.

Если значение опции defaultDate не установлено, вместо него используется текущая дата. (Разумеется, здесь имеется в виду дата, установленная в пользовательской системе. Установка часовых поясов, переход на летнее время, неправильно настроенная конфигурация — все это может стать причиной того, что отображаемая для пользователя дата не будет совпадать с той, на которую вы рассчитываете.)

Эта опция используется лишь в случае отсутствия атрибута value в элементе input. Если этот атрибут присутствует (независимо от того, включен ли он в документ вами или появился в результате предварительного выбора пользователем), то виджет Datepicker будет использовать его значение value.

Если необходимо, чтобы календарь открывался с другой начальной датой, можно установить ее, воспользовавшись одним из способов, описанных в таблице ниже:

Возможные значения опции defaultDate
Значение Описание
null Используется текущая дата
Объект Date Используется значение, представленное в виде JavaScript-объекта Date
+дни, -дни Используется дата, отличающаяся от текущей даты на указанное количество дней. Так, +3 означает дату, которая наступит через три дня после текущей, а -2 — дату двухдневной давности
+1d +7w -1m +1y Используется дата, которая отсчитывается от текущей даты и выражается посредством количества дней (d), недель (w), месяцев (m) и лет (y), определяющих величину сдвига даты вперед (+) или назад (-) по времени. Допускается смешивание положительных и отрицательных значений в одной дате. Например, комбинации значений -1d +1m, используемой совместно с датой 12 ноября 2011 года, соответствует 11 декабря 2011

Пример использования опции defauitDate для указания даты, которая наступит через пять лет, приведен ниже:

Предположим, текущей дате соответствует декабрь 2013 года. Тогда, как показано на рисунке ниже, дате, определяемой значением опции defauitDate, соответствует декабрь 2018 года:

Описанный формат указания относительных дат встретится вам еще не раз. Это очень гибкий формат, обеспечивающий необходимую точность. Точно так же, как это сделано в примере, можно опустить любой интервал, который не собираетесь изменять. Например, вместо значения «+0d +0w +0m +5y» вполне можно использовать значение «+5y». В этом формате удобно то, что он допускает смешивание положительных и отрицательных значений для различных интервалов, что позволяет точно определить нужную дату.

Определение события, инициирующего открытие всплывающего календаря

Опция showOn позволяет управлять событием, в ответ на которое должен отображаться всплывающий календарь. Эта опция может принимать одно из трех значений:

focus

Всплывающий календарь открывается при получении фокуса ввода элементом input. Это значение используется по умолчанию.

button

Всплывающий календарь открывается щелчком на кнопке.

both

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

В случае использования значений button или both виджет Datepicker создает элемент button и помещает его в документ непосредственно после элемента input. Пример использования опции showOn приведен ниже:

Как показано на рисунке, в документе появилась кнопка. Поскольку в этом примере опции showOn присвоено значение both, всплывающий календарь будет отображаться как при щелчке на кнопке, так и при получении фокуса элементом input.

Кнопка, добавляемая виджетом Datepicker, не является виджетом Button jQuery UI. Если вы хотите, чтобы все кнопки были однотипными, выберите элемент button и вызовите метод button() jQuery UI.

Элемент button можно стилизовать с помощью опций buttonImage и buttonText. Если задать в опции buttonImage URL-адрес изображения, то виджет Datepicker поместит это изображение на кнопку. Кроме того, связанный с кнопкой текст, заданный по умолчанию (многоточие), можно заменить другим текстом с помощью опции buttonText, как показано в примере ниже:

Совместно используя опции buttonImage и buttonImageOnly, можно вообще избавиться от кнопки, заменив ее изображением. Соответствующий пример приведен ниже:

В этом примере задается изображение right.png, а для опции buttonImageOnly устанавливается значение true. Кроме того, в документ добавлено несколько CSS-стилей, управляющих размещением изображения относительно элементов label и input. Виджет Datepicker не может самостоятельно определить, куда именно следует поместить элемент img, и поэтому для правильного расположения этого элемента img в документе пришлось применить стили CSS. Результат использования изображения вместо кнопки представлен на рисунке:

Управление выбором даты

Назначение виджета Datepicker — предоставить пользователю возможность выбрать дату, но во многих случаях в этот процесс требуется вводить некоторые ограничения. В таблице ниже описаны настройки, позволяющие устанавливать ограничения, вынуждающие пользователя выбирать лишь допустимые даты:

Свойства виджета Datepicker, обеспечивающие управление выбором дат
Свойство Описание
changeMonth Если эта опция равна true, то в календаре отображается раскрывающийся список, обеспечивающий возможность непосредственной навигации по месяцам. Значение по умолчанию — false
changeYear Если эта опция равна true, то в календаре отображается раскрывающийся список, обеспечивающий возможность непосредственной навигации по годам. Значение по умолчанию — false
constrainInput Если эта опция равна true, то виджет Datepicker проверяет соответствие содержимого поля ввода заданному формату даты. Значение по умолчанию — true
hideIfNoPrevNext Если эта опция равна true, то значки, позволяющие перемещаться по календарю вперед и назад относительно отображаемой даты, полностью скрываются, а не просто отключаются. Значение по умолчанию — false
maxDate Определяет максимальную дату, доступную для выбора. По умолчанию это ограничение отсутствует
minDate Определяет минимальную дату, доступную для выбора. По умолчанию это ограничение отсутствует
numberOfMonths Определяет количество месяцев, одновременно отображаемых в календаре. Значение по умолчанию — 1
showCurrentAtPos Если для календаря задано одновременное отображение нескольких месяцев, то данная опция определяет номер позиции, в которой должен отображаться текущий или заданный по умолчанию месяц. Значение по умолчанию — 0
stepMonths Определяет, на сколько месяцев вперед или назад должна сдвигаться отображаемая в календаре дата при щелчке на кнопке перехода вперед или назад во времени
yearRange Определяет диапазон лет, доступных для выбора в раскрывающемся списке, добавляемом с помощью опции changeYear. По умолчанию этот список включает десять предыдущих и десять последующих лет, а также текущий год

Ограничение вводимых символов и диапазона дат

Присвоив опции constrainInput значение true, можно ограничить ввод символов в текстовом поле лишь теми символами, которые соответствуют строго определенному формату. Допустимый набор символов определяется настройками локализации, о которой говорилось выше. Если локализация виджета Datepicker не выполнялась, то следует ожидать, что в набор допустимых символов будут входить лишь цифры и символ косой черты (/).

Использование указанного значения опции constrainInput еще не означает, что пользователь не сможет ввести недопустимую дату, например 99/99/99, но способствует значительному уменьшению вероятности возникновения ошибок. Значение этой настройки еще более возрастает, если для опции showOn установлено значение button, поскольку в этом случае всплывающий календарь не будет автоматически открываться при получении фокуса полем ввода.

Обычно пользователи охотно используют календарь для выбора даты, но для этого они должны его видеть. Если же календарь не отображается на экране, то далеко не каждый пользователь догадается, что для открытия календаря достаточно щелкнуть на кнопке. Любая возможность непосредственного ввода даты в текстовом поле, которую вы предоставляете пользователю, увеличивает вероятность того, что формат введенной им даты окажется неверным. Пример использования опции constrainInput приведен ниже:

Здесь значение true присваивается опции constrainInput лишь для наглядности, поскольку оно является значением по умолчанию для этой опции. Остальные две опции позволяют ограничить диапазон дат доступных для выбора, минимальной и максимальной датой.

Как и в случае опции defaultDate, которая рассматривалась ранее, в качестве значений опций minDate и maxDate могут использоваться null (дата не определена), JavaScript-объект Date, число дней и строка относительной даты. В данном примере выбрано числовое представление, указывающее количество дней, отсчитываемых относительно текущей даты.

На рисунке видно, что Datepicker отключает ячейки календаря, недоступные для выбора:

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

Значение minDate не обязательно должно относиться к прошлому, а значение maxDate — к будущему, равно как вовсе не обязательно задавать одновременно оба значения. Чтобы предоставить пользователю возможность выбирать даты из диапазона, которому предшествует некий «подготовительный» период, можно присвоить опции minDate значение, относящееся к будущему, и тем самым лишить пользователя возможности выбора дат, относящихся к упомянутому периоду, как показано в примере ниже:

В этом примере мы указали, что пользователю не должны быть доступны для выбора даты, предшествующие той, которая наступит через 4 дня после текущей даты. Значение опции maxDate не определено, и это означает, что пользователь сможет выбрать любую дату, следующую за указанным «периодом задержки». Результат представлен на рисунке:

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

Опции minDate и maxDate работают в сочетании с опцией defaultDate, откуда следует, что привязка диапазонов к текущей дате не является обязательной.

Создание календаря, отображающего одновременно несколько месяцев

Виджет Datepicker позволяет установить количество месяцев, которые должны одновременно отображаться в календаре, посредством опции numberOfMonths. Это можно сделать, указав либо требуемое количество месяцев, либо массив из двух элементов, определяющий размеры месячной календарной сетки.

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

В этом примере задана календарная сетка, высота которой соответствует одному месяцу, а ширина — трем. Результат представлен на рисунке:

Массив из двух элементов [1, 3] эквивалентен числовому значению 3. Если значение опции numberOfMonths задано в виде числа, то виджет отображает соответствующее количество месяцев в одном ряду.

Причина, по которой я редко использую описанный подход, когда работаю с всплывающими календарями, заключается в том, что в случае больших сеток приходится делать определенные предположения относительно размеров окна браузера и дисплея. Окно всплывающего виджета Datepicker не является диалоговым окном операционной системы. Оно представляет собой искусно стилизованный HTML-элемент, который отображается как часть HTML-документа. Это означает, что при отображении крупных календарных сеток на небольшом экране или в маленьком окне браузера значительная часть остальной информации, содержащейся в документе, окажется смещенной за пределы экрана.

Предоставление прямого доступа к месяцам и годам

Вместо того чтобы просто отображать месяцы и годы в заголовке календаря, можно обеспечить прямой доступ к соответствующим периодам времени с помощью раскрывающихся списков. Эта возможность позволяет ускорить работу в тех случаях, когда пользователям приходится выбирать даты в широком диапазоне возможных значений, и реализуется с помощью опций changeMonth и changeYear.

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

В этом сценарии активизированы оба раскрывающихся списка. Кроме того, для ограничения диапазона лет, между которыми пользователю разрешены переходы, используется опция yearRange. Требуемый диапазон указан с помощью значения «-1:+2», которое означает, что в календаре пользователю разрешены переходы в пределах одного года назад и двух лет вперед относительно текущего года.

Раскрывающиеся списки и заданный диапазон лет отображены на рисунке:

При определении годовых диапазонов с помощью опции yearRange можно указывать фактические годы. Так, в данном примере можно было бы указать значение: «2012:2015».

Управление внешним видом виджета Datepicker

Существует целый ряд свойств, позволяющих настраивать внешний вид виджета Datepicker при его отображении для пользователя. Для выполнения обычных задач, связанных с выбором даты, можно удовлетвориться внешним видом календаря, используемым по умолчанию, с которым вы уже знакомы по предыдущим примерам, однако возможность настройки внешнего вида в соответствии с задачами конкретного веб-приложения чрезвычайно полезна.

Свойства, обеспечивающие возможность изменения внешнего вида виджета Datepicker, приведены в таблице ниже:

Свойства, позволяющие управлять внешним видом виджета Datepicker
Свойство Описание
appendText Задает текст подсказки, содержащий дополнительную информацию, например пояснения относительно форматирования даты, который будет вставлен в документ после элемента input
closeText Задает текст для кнопки закрытия календаря, отображающейся на панели вспомогательных кнопок, если она включена. Значение по умолчанию — «Закрыть»
currentText Задает текст для кнопки возврата к текущему месяцу, отображающейся на панели вспомогательных кнопок, если она включена. Значение по умолчанию — «Сегодня»
duration Задает скорость или длительность выполнения анимации, заданной опцией showAnim. Значение по умолчанию — normal
gotoCurrent Если эта опция равна true, то кнопка «Сегодня», находящаяся на панели вспомогательных кнопок, если она включена, будет осуществлять возврат к выбранной, а не к текущей дате. Значение по умолчанию — false
selectOtherMonths Если эта опция равна true, то становятся доступными для выбора даты, отображаемые в результате установки равным true значения опции showOtherMonths
showAnim Определяет тип анимации, используемой для отображения и сокрытия всплывающих календарей. Значение по умолчанию — false
showButtonPanel Если эта опция равна true, то в календаре будет отображаться вспомогательная панель с кнопками, с помощью которых пользователь сможет переходить к текущей дате и (если используется всплывающий виджет) закрывать календарь. Значение по умолчанию — false
showOptions Задает опции анимации, указанной опцией showAnim
showOtherMonths Если эта опция равна true, то пустые поля в календарной сетке будут заполняться датами из предыдущих и последующих месяцев. Значение по умолчанию — false
showWeek Если значение этой опции равно true, то в календаре будет отображаться столбец с номерами недель. Значение по умолчанию — false
weekHeader Задает заголовок столбца календаря с номерами недель, включенной с помощью опции showWeek. Значение по умолчанию — «Нед»

Отображение недель

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

Если опция showWeek имеет значение true, то в календаре отображается столбец с номерами недель. По умолчанию заголовком этого столбца является «Нед», однако его можно изменить с помощью опции weekHeader. В примере включено отображение столбца недель, название которого изменено на «№ недели»:

Заполнение пустых ячеек календаря датами соседних месяцев

По умолчанию в календаре отображаются лишь даты, относящиеся к текущему месяцу. Это означает, что в календарной сетке могут присутствовать пустые ячейки. Можно разрешить заполнение пустых ячеек датами предыдущего и последующего месяцев, установив значение опции showOtherMonths равным true, как показано в примере ниже:

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

Использование вспомогательной панели для дополнительных кнопок

Установка значения true для опции showButtonBar приводит к добавлению панели дополнительных кнопок, располагающейся в нижней части окна виджета Datepicker. В случае всплывающего календаря панель содержит две кнопки: «Сегодня» и «Закрыть». Кнопка «Сегодня» позволяет вернуться к текущей дате, а кнопка «Закрыть» предназначена для закрытия окна календаря. Текст, используемый для этих кнопок, можно изменить с помощью опций currentText и closeText.

Если для опции goToCurrent установить значение true, то календарь будет возвращаться к выбранной дате, а не текущей. Это средство удобно использовать, если виджет Datepicker сконфигурирован с определенным значением опции defaultDate. Если цель выбора даты связана с прошлыми или будущими событиями, то возврат к текущей дате не всегда целесообразен. Соответствующий пример приведен ниже:

Обратите внимание, что использование опции goToCurrent приводит к тому, что нажатие кнопки вызывает переход к выбранной дате. В данном примере такой выбранной датой служит значение атрибута value элемента input, но если пользователь выберет другую дату, а затем вновь откроет календарь, то нажатие кнопки будет возвращать календарь к дате, выбранной пользователем, а не к той, которая указана вами.

Методы виджета Datepicker

Методы, поддерживаемые виджетом Datepicker, приведены в таблице ниже:

Методы виджета Datepicker
Метод Описание
datepicker(«destroy») Полностью удаляет функциональность виджета Datepicker из базового элемента
datepicker(«disable») Приостанавливает работу виджета Datepicker для базового элемента
datepicker(«enable») Возобновляет работу ранее приостановленного виджета Datepicker для базового элемента
datepicker(«option», опции) Позволяет получить или установить значения одной или нескольких опций виджета Datepicker
datepicker(«isDisabled») Возвращает true, если виджет Datepicker отключен
datepicker(«hide») Скрывает всплывающий календарь, если он видимый
datepicker(«show») Отображает всплывающий календарь, если он невидимый
datepicker(«refresh») Обновляет календарь для отражения выполненных в базовом элементе изменений
datepicker(«getDate») Получает дату, выбранную в календаре
datepicker(«setDate», дата) Устанавливает указанное значение в качестве выбранной даты календаря

Получение и изменение даты программным путем

Чаще всего я прибегаю к использованию методов getDate и setDate в тех случаях, когда хочу предоставить пользователям возможность выбора целых диапазонов дат с помощью нескольких виджетов Datepicker. В подобных ситуациях я предпочитаю не отображать выбранные даты в текстовых полях и вывожу лишь количество дней между заданными граничными датами. Соответствующий пример приведен ниже:

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

Как только пользователь выбирает дату в первом календаре, мы применяем метод setDate для подготовки второго календаря, а метод getDate — для получения дат из обоих календарей и последующего вычисления разницы в днях между первой и второй датами (для простоты предполагается, что обе даты относятся к одному и тому же месяцу). Вид документа в окне браузера представлен на рисунке:

События виджета Datepicker

Как и все виджеты jQuery UI, виджет Datepicker поддерживает набор событий, позволяющих получать уведомления о важных изменениях в состоянии приложения. Эти события приведены в таблице ниже:

События виджета Datepicker
Событие Описание
create Происходит при создании экземпляра Datepicker
onChangeMonthYear Происходит, когда пользователь переходит к другому месяцу или году в календаре
onClose Происходит при закрытии всплывающего календаря
onSelect Происходит, когда пользователь выбирает дату

Я не буду повторно демонстрировать, как работает метод onSelect, поскольку он уже использовался в паре примеров, включая тот, который был рассмотрен в предыдущем разделе. Единственное, на что я хочу обратить ваше внимание, — это то, что аргументами, передаваемыми обработчику события, служат строковые представления выбранной даты и экземпляра Datepicker, породившего данное событие.

Событие onChangeMonth позволяет реагировать на событие, которое происходит при выборе пользователем другого месяца или года, будь то с помощью раскрывающихся списков, включенных посредством использования опций changeMonth и changeYear или кнопок листания месяцев.

Используя метод onClose, можно реагировать на закрытие всплывающего календаря. Это событие запускается даже в том случае, если пользователем не была выбрана дата в календаре. Аргументами обработчика события являются строковое представление даты (или пустая строка, если пользователь закрыл окно, не сделав выбора) и экземпляр Datepicker, породивший данное событие.

professorweb.ru

jQuery UI – надстройка над JavaScript-библиотекой jQuery. Она поможет создавать по настоящему интерактивные веб-приложения. Сегодня мы познакомимся с виджетом Datepicker.
Виджет Datepicker
Datepicker – это интерактивный календарь, который связан с полем ввода. Щелчок в поле ввода приводит к тому, что в отдельном слое открывается небольшой календарь. Выбираете нужную дату и готово – дата занесена в поле ввода.

Для начала посетим страницу настраиваемой закачки на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component , чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется – отмечаем чекбокс Datepicker и чекбокс UI Core.
Кроме этого, справа есть выпадающий список, где можно выбрать понравившуюся тему оформления. Если все готово, кликаем кнопку Download и получаем архив. Можно испытать пример как есть, но интереснее создать свою HTML-страничку, где сначала в разделе HEAD подключить несколько файлов, которые есть в архиве.

<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script> <script src="js/i18n/jquery-ui-i18n.js" type="text/javascript"></script>

Сначала мы подключили файл стилей одной из многочисленных тем оформления. Кроме этого мы подключили файл библиотеки и файл, в котором заключена функциональность UI Core и виджета Datepicker. И наконец, последний файл обеспечивает локализацию виджета для нужного языка. Найти его можно в полученном архиве, в папке /development-bundle/ui/i18n

Из разметки потребуется минимум – просто элемент input:

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

Кстати, если Вы хотите, чтобы календарь не появлялся по щелчку в элементе input, а был всегда виден – просто используйте обычный элемент div:

<div id="datepicker"><div>

Связываем виджет Datepicker с нашей HTML-разметкой:

<script type="text/javascript"> $(function(){  $("#datepicker").datepicker(); }); </script>

Отлично! С настройками по умолчанию все понятно, но нам хотелось бы иметь календарь на русском языке (или, к примеру, на украинском). Давайте это сделаем:

<script type="text/javascript"> $(function(){  $.datepicker.setDefaults(  $.extend($.datepicker.regional["ru"])  );  $("#datepicker").datepicker(); }); </script>

Приведенный в примере код обеспечит поддержку русского языка, а если Вы замените ru на uk (интересно, почему не на ua?) то получите календарь уже на украинском языке.

Но вероятно Вам понадобится изменить какие-то настройки, чтобы использовать Datepicker для решения своих задач. Давайте попробуем это сделать.

<script type="text/javascript"> $(function(){  $.datepicker.setDefaults(  $.extend($.datepicker.regional["ru"])  );  $("#datepicker").datepicker({  minDate: "-30",  maxDate: "+1m +1w +3d"  }); }); </script>

Мы передали виджету две опции, названия которых говорят сами за себя – мы установили минимальную и максимальную дату, которую можно выбрать в календаре. Безусловно, полезные опции, но таких опций гораздо больше, а принцип их использования ничем не отличается от только что рассмотренного принципа. Полный список возможных опций приведен ниже:

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

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

defaultDate – устанавливает дату, которая будет подсвечена при первом открытии, если поле выбора даты пустое. Опция может быть определена через объект Date, либо как количество дней от текущего для (например +7 или -15), либо как строка значений, определяющих период (‘y’ для лет, ‘m’ для месяцев, ‘w’ для недель, ‘d’ для дней, например ‘+1m +7d’), и наконец как null для текущего дня.

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

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

gotoCurrent – если установить значение опции в true, то кнопка «Сегодня» (доступная при showButtonPanel: true) будет указывать на выбранную дату взамен текущей.

hideIfNoPrevNext – если Вы ограничиваете диапазон доступных дат с помощью опций minDate и maxDate, то при достижении края диапазона, стрелки «Назад» и «Вперед» становятся неактивными. Но их можно и совсем скрывать, передав в опции hideIfNoPrevNext значение true.

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

maxDate – устанавливает максимальную возможную для выбора дату через объект Date или как число дней от текущего (например +7) или как строку значений определяющих период (‘y’ для лет, ‘m’ для месяцев, ‘w’ для недель, ‘d’ для дней, например ‘+1y +1m’), или null для отсутствия ограничения.

minDate – устанавливает минимальную возможную для выбора дату через объект Date или как число дней от текущего (например -7) или как строку значений определяющих период (‘y’ для лет, ‘m’ для месяцев, ‘w’ для недель, ‘d’ для дней, например ‘-1y -1m’), или null для отсутствия ограничения.

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

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

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

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

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

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

shortYearCutoff – значение по умолчанию +10. Эта опция используется только при условии использования в dateFormat двузначной записи года и выполняет роль компенсатора для определения века. Если значение передано в виде числа, используется как есть. Если значение передано в виде строки, конвертируется в число и добавляется к текущему значению года. После того как значение определено, все данные, выступающие в качестве значения года, и меньшие и равные ему считаются годами текущего века. Значения большие – считаются годами предыдущего века.

showAnim – определяет тип анимации при открывании календаря. По умолчанию имеет значение show (при закрывании будет использован hide). Без подключения дополнительных файлов могут быть использованы эффекты ’slideDown’ и ‘fadeIn’ (при закрывании соответственно будут использоваться эффекты ’slideUp’ и ‘fadeOut’). Так же возможно использование любых эффектов jQuery UI Effects при условии их дополнительного подключения.

showButtonPanel – установка значения true для этой опции приведет к тому, что будет показана панель с двумя кнопками – переход к сегодняшней дате и закрытие календаря.

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

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

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

showOptions – если Вы используете один из эффектов jQuery UI Effects, с помощью этой опции ему можно передать дополнительные настройки. Например: showOptions: {direction: ‘up’}.

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

stepMonths – определяет насколько месяцев сдвигать календарь при щелчке по ссылкам Следующий и Предыдущий. По умолчанию – 1.

yearRange – управление диапазоном лет, отображаемых в выпадающем списке (при использовании опции changeYear). По умолчанию используется значение ‘-10:+10′ относительно текущего года. Возможно использование и абсолютного формата, например ‘1980:2025′.

Перейдем к знакомству с событиями виджета Datepicker:

<script type="text/javascript"> $(function(){  $.datepicker.setDefaults($.extend(  $.datepicker.regional["ru"])  );  $("#datepicker").datepicker({  beforeShow: function(input) {  $(input).css("background-color","#ff9");  },  onSelect: function(dateText, inst) {  $(this).css("background-color","");  alert("Выбрано: " + dateText +  "nnid: " + inst.id +  "nselectedDay: " + inst.selectedDay +  "nselectedMonth: " + inst.selectedMonth +  "nselectedYear: " + inst.selectedYear);  },  onClose: function(dateText, inst) {  $(this).css("background-color","");  }  }); }); </script>

В примере мы передаем виджету сразу три опции, в которых определены callback-функции. В опции beforeShow определена функция, которая будет вызвана перед отображением календаря. С помощью css-свойства background-color, эта функция установит желтый цвет фона для элемента input. В опции onSelect определена функция, которая будет вызвана в момент выбора какой-либо даты в календаре и передаст пустое значение css-свойству background-color, возвратив его в начальное состояние. И, наконец, в опции onClose определена функция, которая вызывается при закрытии календаря, если никакое значение выбрано не было. Она тоже вернет css-свойство background-color в его начальное состояние.

Но, обратите внимание, все callback-функции принимают некоторые аргументы. С ними стоит познакомиться немного подробнее.

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

В опции onSelect функция принимает два аргумента. Первый аргумент dateText – строка, представляющая собой тот текст, который появится и в элементе input. Второй аргумент – объект datepicker. В том же примере показано, как можно обратиться к некоторым из свойств этого объекта.

Функция, определенная в опции onClose принимает те же два аргумента, что и функция из опции onSelect.

И еще одно важное обстоятельство для callback-функций, определенных в опциях onSelect и onClose – в контексте этих функций ссылка this указывает на объект, характеризующий элемент input.

Ниже приведены описания всех возможных событий для виджета Datepicker.

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

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

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

onClose – в этой опции определяется функция, которая будет вызвана, когда календарь был закрыт без выбора какой-либо даты.

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

Теперь можно поговорить о методах виджета Datepicker. Давайте добавим в наш HTML-код обыкновенную ссылку:

<a href="#">Открыть в диалоге</a>

и используем вот такой javascript-код:

<script type="text/javascript"> $(function(){  $.datepicker.setDefaults(  $.extend($.datepicker.regional["ru"])  );  $("#datepicker").datepicker({  changeYear: true  });  $("a").click(function(){  $("#datepicker").datepicker(  "dialog",  "23.04.2009",  function(){  alert("Событие onSelect");  },  { showButtonPanel: true },  [300, 300]  );  }); }); </script>

В приведенном примере мы демонстрирует работу метода dialog. Мы вызываем этот метод при щелчке на ссылке Открыть в диалоге. Первый аргумент – это название метода, второй аргумент textDate – дата на которой по умолчанию будет открываться календарь. Остальные три аргумента необязательные, но мы познакомимся и с ними. В аргументе onSelect можно передать callback-функцию, которая будет вызвана при выборе конкретной даты в календаре. В аргументе settings можно передать объект с новыми настройками виджета, которые будут применены к календарю, который будет открыт в диалоговом окне. И, наконец, последний аргумент pos – здесь можно задать координаты, в которых будет появляться календарь. Координаты можно задавать числами, но если передать в функцию, вызываемую по щелчку на ссылке объект event, то можно будет определить координаты, используя свойства объекта event. Например, использовать event.clientX и event.clientY.

Далее приведены описания всех методов виджета Datepicker.

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

disable – .datepicker(‘disable’) временно запрещает использование всей функциональности виджета. Вновь разрешить ее использование можно с помощью метода enable.

enable – .datepicker(‘enable’) разрешает использование всей функциональности виджета, если ранее она была запрещена с использованием метода disable.

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

dialog – .datepicker(‘dialog’, dateText, [onSelect], [settings], [pos]) открывает виджет Datepicker в режиме диалогового окна. В аргументе dateText передается дата, на которой должен быть открыт календарь. Остальные аргументы необязательные. В аргументе onSelect можно передать функцию, которая будет вызвана в момент выбора даты в календаре, в аргументе settings можно передать объект с новыми настройками виджета, в аргументе pos – координаты, в которых будет открыто диалоговое окно. Здесь можно использовать события мыши, чтобы определить координаты.

isDisabled – .datepicker(‘isDisabled’) метод возвращает значение true, если к виджету был применен метод disable и false в противном случае.

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

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

getDate – .datepicker(‘getDate’) метод возвращает дату, выбранную в календаре.

setDate – .datepicker(’setDate’, date) метод позволяет установить дату в календаре. Значением аргумента date может быть число, определяющее количество дней от текущей даты (например: +7 или -14) или строка, определяющая период (‘y’ для лет, ‘m’ для месяцев, ‘w’ для недель, ‘d’ для дней, например ‘+1m +7d’). Значение null установит текущую дату.

Вот и все. Разве что сказать, что для управления календарем можно использовать горячие клавиши:
page up/down – предыдущий/следующий месяц;
ctrl+page up/down – предыдущий/следующий год;
ctrl+home – выбор текущего месяца или открытие календаря после того как он был закрыт;
ctrl+left/right – предыдущий/следующий день;
ctrl+up/down – предыдущая/следующая неделя;
enter – выбор отмеченной даты;
ctrl+end – закрытие и удаление даты из поля ввода;
escape – закрытие календаря без выбора даты;

chelnavka.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.