31 янв 2013
Настраиваем Jquery Datepicker.
У нас вы можете скачать бесплатно Настраиваем Jquery Datepicker. .

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
В процессе разработки скрипта для студии звукозаписи, возникла необходимость в календаре ,который умеет отключать выборочные даты . А так же имеелась бы возможность задавать промежутки с датами .
В процессе поиска выбор пал на jquery datepicker .B если со второй частью проблем никаких не возникло , то с первой частью задачи пришлось повозиться определенное время.Собственно пост и посвещен способу реализации этого момента.
С api календаря можно ознакомиться на офф.сайте , поэтому уточнять буду только некоторые моменты.
Сначало взглянем на то что получилось после указания диапозона дат :
<script type="text/javascript">
$(function(){
   $.datepicker.setDefaults(
                 $.extend($.datepicker.regional["ru"])
  );
   $("#datepicker").datepicker({
    dateFormat: "yy-mm-dd",
         minDate: new Date('2013-01-22'),
         maxDate: new Date('2013-01-30'),
   });
});
          
</script>


Здесь остановимся только на minDate - начальная дата ,а maxDate - конечная , ничего сложного.
Т.е таким оброзом мы задали активный диапозон дат,выбрать даты теперь можно только из этого диапозона.
Так я решил первую часть .Однако оставалось самое сложное -вторая часть -отключить даты по выбору .
В jquery datepicker есть функция ,которая которая позволяет что-то делать с датой перед ее показом ,она почти так и называется : beforeShowDay ,ее я и использовал. Но все же остаеться вопрос как отключить даты. Смотрим js функцию которую я и использовал.
function disable  (d) {
var dates =new Array('2013-01-23','2013-01-25');
                         var dat = $.datepicker.formatDate("yy-mm-dd", d);
for (var i=0; i < dates.length; i++){
   if ($.inArray(dat, dates)!=-1)  return [false];
    else return [true];
}
   }


Поясню.d - массив со всеми датами из календаря ,переменная dat - тот же массив ,но уже приведенный к нужному формату даты , в данном случае yy-mm-dd ,dates-массив с датами которые необходимо отключить .Далее идет простой цикл ,который сверяет дату из календаря с датами из массива dates и если совпадают ,то отключаем ,если нет ,то соответсвенно нет.

итоговый код :
<script type="text/javascript">
   var dates =new Array('2013-01-23','2013-01-25');
$(function(){
   $.datepicker.setDefaults(
                 $.extend($.datepicker.regional["ru"])
  );
   $("#datepicker").datepicker({
    dateFormat: "yy-mm-dd",
         minDate: new Date('2013-01-22'),
         maxDate: new Date('2013-01-30'),
            beforeShowDay: disable
   });
});
            function disable  (d) {
                         var dat = $.datepicker.formatDate("yy-mm-dd", d);
for (var i=0; i < dates.length; i++){
   if ($.inArray(dat, dates)!=-1)  return [false];
    else return [true];
}
   }
</script>

Вот собственно и все . Дальше приведу пример реализации в конкретном проекте .
У меня получилось два файла php . Первый - конфигурации , второй - класс генерации календаря.
Файл config.php :
<?php
//Настройки для календаря
$config = array (
'on_off' => "1", // Включен или нет диапазон дат
'start_date' => "2013-01-29", // начальная дата
'end_date' => "2013-02-11", // конечная дата
);
?>

$config - массив с настройками .Далее смотрите коментарии там все просто .

Второй файл сложнее . Calendar.class.php .Вот его код :


<?php
/**
* @author smotrikov
* @copyright 2013
*/
include_once ("config.php");

class Calendar {
    public $on_off;
  
    public $date_arr =null;
  
    public $start_date = null; // yy-mm-dd
  
    public $end_date= null; // yy-mm-dd
  
    public $html_id; // #datepicker
  
    function RenderCal ($on_off, $start_date ,$end_date,$html_id , $date_arr){
            if ($on_off == '1'){
            $cal= "
            <input  id=\"{$html_id}\" type=\"text\" name=\"date\" class=\"date\"   />
  <script type=\"text/javascript\">
   //var dates =new Array('2013-01-23','2013-01-25');
   var dates =new Array({$date_arr});
$(function(){
   $.datepicker.setDefaults(
                 $.extend($.datepicker.regional[\"ru\"])
  );
   $(\"#{$html_id}\").datepicker({
    dateFormat: \"yy-mm-dd\",
         minDate: new Date('{$start_date}'),
         maxDate: new Date('{$end_date}'),
            beforeShowDay: disable
   });
});
            function disable  (d) {
                         var dat = $.datepicker.formatDate(\"yy-mm-dd\", d);
for (var i=0; i < dates.length; i++){
   if ($.inArray(dat, dates)!=-1)  return [false];
    else return [true];
}
   }
</script>";
            }
            else {
                    $cal= "
            <input  id=\"{$html_id}\" type=\"text\" class=\"date\" name=\"date\"  />
            <script type=\"text/javascript\">
   var dates =new Array({$date_arr});
$(function(){
   $.datepicker.setDefaults(
                 $.extend($.datepicker.regional[\"ru\"])
  );
   $(\"#{$html_id}\").datepicker({
    dateFormat: \"yy-mm-dd\",
            beforeShowDay: disable
   });
});
            function disable  (d) {
                         var dat = $.datepicker.formatDate(\"yy-mm-dd\", d);
for (var i=0; i < dates.length; i++){
   if ($.inArray(dat, dates)!=-1)  return [false];
    else return [true];
}
   }
</script>";
            }
return $cal;
    }
}
?>

Переменная $on_off - включен ли режим диапозона дат .
$date_arr - массив с датами ,Которые нужно отключить .(По умолчанию null)
$html_id - id inputa в котором нужно сгенерировать календарь.
$date_arr - должен иметь вид : (например) $date_arr = Array ("date-1","date-2");
как использовать класс :
$Calendar = new Calendar; // создаем экземпляр класса
echo $Calendar->RenderCal($on_off,$start_date ,$end_date , 'datepicker' , $date_arr); // выводим календарь

календарь будет выведен сразу с input ` ом .

Вот собственно и все решения проблемы .Спасибо за внимание.










Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.