Все для DataLife Engine / DLE модули / Разные скрипты / Как отключать даты по выбору jQuery Datepicker

Как отключать даты по выбору jQuery Datepicker


Описание для тех кому нужно сделать отключение даты по выбору в DataLife Engine с помощью jQuery Datepicker, а также получить возможность устанавливать промежутки в датами. По словам автора: в процессе создания скрипта под студию звукозаписи, понадобилось в календаре сделать возможность, которая бы отключала выборочные даты и ещё, имелась возможность задавать промежутки между датами. Интересное решение для сайта DLE.

В результате поиска выбор пал на jQuery Datepicker и если со второй частью никаких проблем не возникло, то с первой частью задачи пришлось повозиться подольше. Собственно пост: Как отключать даты по выбору jQuery Datepicker? и посвящен способу реализации этого момента с возможностью задавать промежутки между датами.
С 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>


P.S Скажу что это вероятно это единственное готовое рабочее решение. В гугле находил еще два, но ни один почему - то не работал. Может они и рабочие, но там было лишние моменты. Замечу еще то, что js я не знаю, поэтому все сделал по логике php и методам js .
Вот собственно и все .

Дальше приведу пример реализации в конкретном проекте .
У меня получилось два файла. Первый - конфигурации , второй - класс генерации календаря.
Файл 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 ` ом .

Вот собственно и все решения проблемы. Спасибо за внимание. Хаки для вду Как отключать даты по выбору jQuery Datepicker

Uchim-jquery-Datepicker-otklyuchat-daty-po-vyboru.rar [8,46 Kb] (cкачиваний: 52)
  • 40

Комментарии 2

другой Гость от 22 января 2016 18:29
рабочий код!!! +
pizdey от 20 июня 2013 15:04
отвратительный код(
Добавить комментарий

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

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent