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

Рубрика: Модули DLE » Разные скрипты для DLE
Как отключать даты по выбору 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
Как отключать даты по выбору jQuery Datepicker? Описание для тех кому нужно сделать отключение даты по выбору в Dle с помощью jQuery Datepicker, вы найдете всё лучшее у нас форумы, хаки, модули, шаблоны.
  • 40
Рубрика: DLE модули » Разные скрипты
Ранее » Модуль Gallery3 (скрипт галерея)« Далее Оценка фотографий для Vii Engine
Нажмите на ссылку, чтобыОставить комментарий
  • № :2
  • 22 января 2016 18:29
рабочий код!!! +
  • № :1
  • 20 июня 2013 15:04
отвратительный код(