May 30 2009 at 12:10

«Избавление» от вездесущего input при использовании jQuery Datepicker версии 1.7.1

Invite pending

Все, кто регулярно использует jQuery UI, наверняка заметили, что представленный в версии 1.7.1 Datepicker довольно сильно отличается от своего предшественника (Datepicker версии UI 1.6.x).

1.7.1 – последняя версия jQuery UI на момент написания поста.

Конечно, http://jqueryui.com/demos/datepicker/ содержит достаточно много готовых примеров настройки и использования Datepicker, что существенно упрощает и ускоряет процесс его интеграции в разрабатываемое решение. Однако текущая реализация этого виджета сильно завязана на элементе input text, который стал практически неотъемлемой частью «календарика».

JQuery Datepicker (default)

Что же делать, если по задумке дизайнера должны использоваться другие элементы управления вместо навязываемого разработчика jQuery UI input text-а? Этот пост о том, как подружить Datepicker версии 1.7.1 с выпадающими списками.

JQuery Datepicker (customized)

Следуя предложенным советам, Вы быстро добьетесь результата, изображенного на рисунке выше. Кроме того, изложенную идею можно взять на заметку и использовать в дальнейшем для более «тонкой» настройки jQuery Datepicker.
Существует несколько способов осуществить задуманное (вплоть до не модификации кода Datepicker в библиотеке jQuery UI). Приведу лишь один из этих способов, на мой взгляд, наиболее простой.

Основная идея заключается в следующем:
1) Назначить специальный css-стиль «неугодному» элементу input. Цель – изменить текстовое поле до неузнаваемости, после чего input text будет выглядеть для пользователя как обычная иконка с изображением календарика.
Пример такого стиля может выглядеть следующим образом:

#calendar-input {

 background:transparent url(/calendar/images/calendar.gif) repeat scroll 0 0;

 border:0 none;

 cursor:pointer;

 float:left;

 font-size:0;

 height:19px;

 text-indent:-5000px; // фикс для IE, который умудряется показывать ничтожно маленький текст даже при font-size: 0 

 width:19px;

}

2) Обеспечить отображение в выпадающих списках даты, которая была выбрана в календаре. И наоборот, чтобы при открытии календаря показывалась именно та дата, которую пользователь установил с помощь select-ов. Сделать это можно, определив действия для onSelect и beforeShow событий Datepicker-a.

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

index.html

<html lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

 <title>jQuery UI Datepicker - Default functionality</title>

 <link type="text/css" href="css/common.css" rel="Stylesheet" /> <!-- содержимое см. ниже -->

 <link type="text/css" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" rel="Stylesheet" /> <!--скачивается с http://jqueryui.com/download -->

 <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <!-- скачивается с http://jqueryui.com/download -->

 <script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script> <!-- скачивается с http://jqueryui.com/download -->

 <script type="text/javascript">

 $(function() {

 // добавляем DatePicker, привязываем выбранное значение в календарике к выпадающим спискам day и monthyear

 $("#calendar-input").datepicker({

 dateFormat: 'dd/mm/y',

 onSelect: function(datetext){

 $("#day option[value='"+datetext.slice(0,2)+"']").attr('selected', 'selected');

 $("#monthyear option[value='"+datetext.slice(6,8)+datetext.slice(3,5)+"']").attr('selected', 'selected');

 },

 beforeShow: function() {

 $(this).val($("#day").val()+"/"+$("#monthyear").val().slice(2,4)+"/"+$("#monthyear").val().slice(0,2));

 }

 } )

 });

 </script>

</head>

<body>



<div class="demo">



<div class="form_day_row">

<select id="day" name="day" class="form_select_day">

 <option value="01">1</option>

 <option value="02">2</option>

 <option value="03">3</option>

 <option value="04">4</option>

 <option value="05">5</option>

 <!-- ... -->

 <option value="30">30</option>

</select>

</div>



<div class="form_month_row">

<select id="monthyear" name="month" class="form_select_month">

 <option value="0904">April 09</option>

 <option value="0905">May 09</option>

 <option value="0906">June 09</option>

 <option value="0907">July 09</option>

 <!--…-->

</select>

</div>



<input class="calendar-input" id="calendar-input" type="text"> <!-- маскируем под иконку -->



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



</body>

</html>

common.css

/*demo page css*/

body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}



.form_day_row {

 float:left;

 margin-right:5px;

 width:40px;

}



.form_select_day {

 width:40px;

}



.form_month_row {

 float:left;

 margin-right:5px;

 width:90px;

}



.form_select_month {

 width:90px;

}



* {

 margin:0;

 padding:0;

}



#calendar-input {

 background:transparent url(/calendar/images/calendar.gif) repeat scroll 0 0;

 border:0 none;

 cursor:pointer;

 float:left;

 font-size:0;

 height:19px;

 text-indent:-5000px;

 width:19px;

}

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

Hubs:

Lumber room