31
янв
2013
Настраиваем Jquery Datepicker.
В процессе разработки скрипта для студии звукозаписи, возникла необходимость в календаре ,который умеет отключать выборочные даты . А так же имеелась бы возможность задавать промежутки с датами .
В процессе поиска выбор пал на jquery datepicker .B если со второй частью проблем никаких не возникло , то с первой частью задачи пришлось повозиться определенное время.Собственно пост и посвещен способу реализации этого момента.
С api календаря можно ознакомиться на офф.сайте , поэтому уточнять буду только некоторые моменты.
Сначало взглянем на то что получилось после указания диапозона дат :
Здесь остановимся только на minDate - начальная дата ,а maxDate - конечная , ничего сложного.
Т.е таким оброзом мы задали активный диапозон дат,выбрать даты теперь можно только из этого диапозона.
Так я решил первую часть .Однако оставалось самое сложное -вторая часть -отключить даты по выбору .
В jquery datepicker есть функция ,которая которая позволяет что-то делать с датой перед ее показом ,она почти так и называется : beforeShowDay ,ее я и использовал. Но все же остаеться вопрос как отключить даты. Смотрим js функцию которую я и использовал.
Поясню.d - массив со всеми датами из календаря ,переменная dat - тот же массив ,но уже приведенный к нужному формату даты , в данном случае yy-mm-dd ,dates-массив с датами которые необходимо отключить .Далее идет простой цикл ,который сверяет дату из календаря с датами из массива dates и если совпадают ,то отключаем ,если нет ,то соответсвенно нет.
итоговый код :
Вот собственно и все . Дальше приведу пример реализации в конкретном проекте .
У меня получилось два файла php . Первый - конфигурации , второй - класс генерации календаря.
Файл config.php :
$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");
как использовать класс :
календарь будет выведен сразу с input ` ом .
Вот собственно и все решения проблемы .Спасибо за внимание.
В процессе поиска выбор пал на 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'),
});
});
</script>
$(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>
Вот собственно и все . Дальше приведу пример реализации в конкретном проекте .
У меня получилось два файла php . Первый - конфигурации , второй - класс генерации календаря.
Файл config.php :
<?php
//Настройки для календаря
$config = array (
'on_off' => "1", // Включен или нет диапазон дат
'start_date' => "2013-01-29", // начальная дата
'end_date' => "2013-02-11", // конечная дата
);
?>
//Настройки для календаря
$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 ` ом .
Вот собственно и все решения проблемы .Спасибо за внимание.
|
|
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Datalife Engine
Релизы
WordPress
Joomla
Другие CMS
Web-Мастеру
Игры/Игровые CMSПоследние комментарии
-
Написал(а): SergTSY
В новости: QR Menu Maker v3.4.0 - бесконтактное меню ресторанаСсылки не рабочие.
Перезалейте, плз? -
Написал(а): anons01
В новости: Akeeba Backup Pro v9.9.2 - компонент резервного копирования для JoomlaUpload doesn't work -
Написал(а): sania4m
В новости: Aoxio v2.1 Nulled - скрипт для бронирования бизнес-услугустановка проходит , но не создается база данных -
Написал(а): Nibiru7
В новости: JRealtime Analytics v3.9.2 - компонент аналитики для Joomlaспасибо за -
Написал(а): jackxren88
В новости: Advanced Custom Fields Pro v2.7.7 - расширенные пользовательские поля для JoomlaМожет есть у кого-то решение как убрать "запрос на ключ"? -
Написал(а): Escudocu
В новости: YOO Glowbar v March 1, 2024 - Joomla шаблон для сайтов о красоте и модеБлагодарю за шаблон!!! -
Написал(а): sendinfo
В новости: Advanced Custom Fields Pro v2.7.7 - расширенные пользовательские поля для JoomlaВиндоус ругается на вирус! Проверьте архив. -
Написал(а): pmvb
В новости: Advanced Module Manager Pro v10.0.18 - расширенный менеджер модулей JoomlaADVANCED MODULE MANAGER PRO V10.0.18 просит ключь???