prowebber.ru - Тут есть все для настоящих вебмастеров

Чтение RSS Мы в твиттере
«    Декабрь 2016    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 

Всё для вебмастера » Web » Полезные статьи » Учим jquery Datepicker отключать даты по выбору

Учим jquery Datepicker отключать даты по выбору


Данный материал предоставлен сайтом ProWebber.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
У нас вы можете скачать бесплатно Учим jquery Datepicker отключать даты по выбору.


Учим jqueryDatepicker отключать даты по выбору


Учим 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 ` ом .

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


0
Просмотры: 4238 VIP ProWebber | Комментарии (2)
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#1czart

  • 7 февраля 2013 05:08
  • Регистрация: 5.02.2010
  • ICQ: --
  • Комментариев: 138
Демо есть где по смотреть ?

--------------------

0

#2S_D

  • 7 февраля 2013 11:42
  • Регистрация: 2.07.2011
  • ICQ: --
  • Комментариев: 2
нет, демо нет.скачайте с офф. сайта календарь и просто замените в нем код на этот

0
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.

Max-energy.top - Заработок на электросчетчиках;)

Skripters.info - все для вебмастера. Только эксклюзивный контент.

Создание шаблонов DLE, быстро и недорого! 3wave.com.ua

Бро лей на лучшую партнёрку

Почти бесплатный VDS хостинг!

Поддержи сайт
Скрипты, cms, шаблоны, статьи по раскрутке

Опросы

Как часто вы бываете на сайте?

Захожу 1-2 раза в день
1-2 часа в сутки
Более 2 часов
Почти целый день тут smile

Архив новостей
Ноябрь 2016 (7)
Октябрь 2016 (10)
Сентябрь 2016 (8)
Август 2016 (11)
Июль 2016 (14)
Июнь 2016 (17)

Последние комментарии:

Искать людей

Ваши переписки