Учим jqueryDatepicker отключать даты по выбору
В процессе разработки скрипта для студии звукозаписи, возникла необходимость в календаре ,который умеет отключать выборочные даты . А так же имеелась бы возможность задавать промежутки с датами .
В процессе поиска выбор пал на 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];
}
}
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>
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); // выводим календарь
echo $Calendar->RenderCal($on_off,$start_date ,$end_date , 'datepicker' , $date_arr); // выводим календарь
календарь будет выведен сразу с input ` ом .
Вот собственно и все решения проблемы .Спасибо за внимание.
Главная
