19:30 Настраиваем Jquery Datepicker. | |
| В процессе разработки скрипта для студии звукозаписи, возникла необходимость в календаре ,который умеет отключать выборочные даты . А так же имеелась бы возможность задавать промежутки с датами . В процессе поиска выбор пал на 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'), }); }); Здесь остановимся только на 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]; } } Вот собственно и все . Дальше приведу пример реализации в конкретном проекте . У меня получилось два файла php . Первый - конфигурации , второй - класс генерации календаря. Файл config.php : //Настройки для календаря $config = array ( 'on_off' => "1", // Включен или нет диапазон дат 'start_date' => "2013-01-29", // начальная дата 'end_date' => "2013-02-11", // конечная дата ); ?> $config - массив с настройками .Далее смотрите коментарии там все просто . Второй файл сложнее . Calendar.class.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= " <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]; } } "; } else { $cal= " <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]; } } "; } 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 | |
