Описание для тех кому нужно сделать отключение даты по выбору в 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