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

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

Разумеется, сегодня никто уже не программирует эту задачу "с нуля" (хотя вот тут я некогда делал) - есть же библиотека JQuery со множеством расширений, в которых всё уже запрограммировано. В частности, расширение DatePicker делает как раз то, что нам нужно.

К сожалению, с версии JQuery 1.7 удобная возможность ввода диапазона дат из DatePicker'а исключена (разработчики обещают вернуть её в будущем), так что используем для примера jquery-1.6.2.min.js, в котором тоже есть всё необходимое. Из всего огромного количества компонент библиотеки JQuery UI (User Interface) нам понадобится только файл ui.datepicker.min.js, а для русификации нашего DаtePicker'а используем файлик jquery-ui-i18n.js. Стилевые настройки содержит файл ui.datepicker.css, расположенный в папке css.

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link type="text/css" href="css/ui.datepicker.css" rel="stylesheet">
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/ui.datepicker.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-i18n.js" type="text/javascript"></script>

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

Это ещё не весь Javascript-код, что нам придётся включить на страничку. Небольшой скрипт, расположенный после загрузки библиотек, занимается настройкой нашего DatePicker'а:

<script type="text/javascript">
$(function(){
  $.datepicker.setDefaults(
   $.extend($.datepicker.regional["ru"])
  );
  $("#datepicker").datepicker({
    rangeSelect: true,
    minDate: "-1y",
    maxDate: "+1y",
    changeMonth: true,
    changeYear: true,
    dateFormat: "dd.mm.yy",
    defaultDate: null
  });
});
</script>

Здесь разрешается ввод диапазона дат (повторим, что работает это только в версиях JQuery младше 1.7), минимальная и максимальная разрешённые даты ставятся на год назад и вперёд от текущей, разрешается вывод списков для смены месяца и года, выставляется формат даты ДД.ММ.ГГГГ (например, 21.12.2011) и датой по умолчанию ставится сегодняшняя.

Теперь нам осталось "нарисовать" форму HTML, содержащуюю текстовое поле ввода даты, скрипт "узнает" его по атрибуту id="datepicker".

<form method="post">
<input id="datepicker" type="text" name="date12" size="23" maxlength="23" value="">
</form>

Вот что получилось (щёлкните по полю и увидите, если мой сайт не лежит :)

Пример был бы неполон и не относился бы к разделу PHP, если бы мы не сказали несколько слов о том, как сохранять полученные даты в базе данных MySQL и наоборот получать ранее сохранённые даты для вывода в DatePicker.

Поскольку на PHP я предпочитаю всегда хранить дату как целое bigint, код будет предназначен для таких случаев, нужные комментарии даны прямо в тексте. Предполагается, что поле формы называется date12, как и в тексте выше.

//Пример кода для получения данных в datepicker из полей БД
//date1 и date2 (начало и конец периода) типа bigint
$sql='select * from ТАБЛИЦА where id="'.$id.'"';
$result = mysql_query($sql);
if (!$result or !mysql_num_rows($result)) {
 // Обработка ошибки
 return;
}
$note = mysql_fetch_assoc ($result);
//Если получена дата из базы - преобразовать в формат поля,
//иначе взять за начало периода текущую дату, за конец - завтрашнюю
if ($note['date1']) $date1=get_int_date($note['date1']);
else $date1=get_int_date(time());
if ($note['date2']) $date2=get_int_date($note['date2']);
else $date2=get_int_date(time()+86400);
//Получить дату для вывода в datepicker
$date12=$date1.'-'.$date2;
//Вывести форму с заполненной датой
 echo '<div align="center">
  <form method="post">
  <input id="datepicker" type="text" name="date12" class="button" size="23" maxlength="23" value="'.$date12.'">
  </form>';
 
//Код функции get_int_date:
function get_int_date ($d) { //Получить дату из bigint
 return @date("d.m.Y", $d);
}
 
 
 
 
//Пример кода для сохранения данных, введённых в datepicer,
//в полях базы с именами date1 и date2 (начало и конец периода) типа bigint
$date12=htmlspecialchars(trim($_POST['date12']));
list ($date1,$date2) = @split ('-', $date12);
$date1=get_field_date(trim($date1));
$date2=get_field_date(trim($date2));
//Переменная $id содержит идентификатор нужной записи
$sql='update ТАБЛИЦА set date1 = "'.$date1.'", date2 = "'.$date2.'" where id = "'.$id.'"';
$result = mysql_query ($sql);
if (!$result) {
 // Обработка ошибки 
}
 
//Код функции get_field_date:
function get_field_date ($date1) { //Получть дату из поля ввода
 $errorlevel = ini_get ('error_reporting');
 error_reporting (0);
 list ($d,$mon,$y) = @split ("\.", $date1);
 $date1 = mktime (0,0,0,$mon,$d,$y);
 error_reporting ($errorlevel);
 return $date1;
}

 Скачать пример в архиве ZIP (48 Кб)

гостевая; E-mail