Помогите с выбором календаря
Когда нет выбора - плохо.
Когда выбор слишком большой - еще хуже. Нужен календарь для вывода дат, настраиваемый по стилям, на русском. Но одно требование обязательно: Аяксом получаю массив дат в будущем. То есть, есть массив дат. Эти даты в календаре должны быть каким-то образом выделены. Где рыть? Где искать? На jQuery есть хорошие календари. Они позволят применить такую опцию? Или на чистом js? php в данном случае не хочу использовать. Буду раз за подсказки. Заранее благодарен. |
Эдди,
http://api.jqueryui.com/datepicker/ Цитата:
Цитата:
|
Спасибо. Сейчас изучу.
Я правильно понимаю, что это тот же Datepicker UI? Я нашел его полное описание на русском. |
Цитата:
|
Установил календарь jQuery UI.
Вот только не нахожу опцию пометки определенных дат из имеющегося массива. -( |
Эдди,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style type="text/css">
body{
font-size: 12px;
}
.active .ui-state-default{
background: rgba(102, 255, 102, 1)
}
.active:hover .ui-state-default{
background: rgba(255, 255, 0, 1)
}
</style>
<script>
$(function() {
var x = new Date(2012,1,29);
$.datepicker.regional['ru'] = {
closeText: 'Закрыть',
prevText: '<Пред',
nextText: 'След>',
currentText: 'Сегодня',
monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь', 'Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн', 'Июл','Авг','Сен','Окт','Ноя','Дек'],
dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'],
dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'],
dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
dateFormat: 'dd.mm.yy',
firstDay: 1,
isRTL: false,
showOtherMonths:true,
selectOtherMonths:true,
changeMonth:true,
changeYear: false,
showAnim:"scale"
};
var arr_data = [[2014,5,12],[2014,5,14]];
$.datepicker.setDefaults($.datepicker.regional['ru'])
$( '#datepicker' ).datepicker({
beforeShowDay: function(date) {
for (var i=0; i<arr_data.length; i++) { var d = arr_data[i];
if (date.getTime() == (new Date(d[0],d[1],d[2])).getTime()) return[true, "active", "Важная дата"]; }
return[true, ""];}
})
});
</script>
</head>
<body>
<div id="datepicker"></div>
</body>
</html>
|
Если я понимаю, то вот эта функция за мои "чаяния" ответственна:
var arr_data = [[2014,5,12],[2014,5,14]];
$( '#datepicker' ).datepicker({
beforeShowDay: function(date) {
for (var i=0; i<arr_data.length; i++) { var d = arr_data[i];
if (date.getTime() == (new Date(d[0],d[1],d[2])).getTime()) return[true, "active", "Важная дата"]; }
return[true, ""];}
});
|
Эдди,
Цитата:
|
Уж больше разжевать и невозможно, кажется.
Пока перешел к следующему фрагменту кода. Но сюда вернусь. СПАСИБО! |
Еще вопрос. Наверное, я вас утомил.
Но не хочется сделать криво. Календарь выдает дату в формате d-m-Y. Просто так клиенту удобнее. А мне надо переформатировать дату для запроса ajax к скрипту php. Могу, конечно, уже в php разобрать строку. Но, думаю, это неправильно. В JS есть функция (простая, иначе легче сделать в php), которая переформатирует дату в Y-m-d? Спасибо! |
Цитата:
сделайте дополнительное поле укажите для поля необходимый формат и отправляйте
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style type="text/css">
body{
font-size: 12px;
}
.active .ui-state-default{
background: rgba(102, 255, 102, 1)
}
.active:hover .ui-state-default{
background: rgba(255, 255, 0, 1)
}
</style>
<script>
$(function() {
$.datepicker.regional['ru'] = {
closeText: 'Закрыть',
prevText: '<Пред',
nextText: 'След>',
currentText: 'Сегодня',
monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь', 'Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн', 'Июл','Авг','Сен','Окт','Ноя','Дек'],
dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'],
dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'],
dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
dateFormat: 'dd.mm.yy',
firstDay: 1,
isRTL: false,
showOtherMonths:true,
selectOtherMonths:true,
changeMonth:true,
changeYear: false,
showAnim:"scale"
};
var arr_data = [[2014,5,12],[2014,5,14]];
$.datepicker.setDefaults($.datepicker.regional['ru'])
$( '#datepicker' ).datepicker({ altField: "#show", altFormat: "yy-mm-dd",
beforeShowDay: function(date) {
for (var i=0; i<arr_data.length; i++) { var d = arr_data[i];
if (date.getTime() == (new Date(d[0],d[1],d[2])).getTime()) return[true, "active", "Важная дата"]; }
return[true, ""];}
})
});
</script>
</head>
<body> <label><input id='show'> Скрытое поле для отправки на сервер</label>
<label><input id='datepicker'> Видимое для клиента нажать выбрать дату</label>
</body>
</html>
|
Как все просто. В сотый раз МЕРСИ!
|
Кстати, вся эта функция излишня.
У меня подключен русскоязычный вариант. Поэтому понадобился только <input type="hidden".....> и вот это: altField: "#show", altFormat: "yy-mm-dd", |
|
Насчет подсветки/отключения определенных дат ничего не работало.
Нарыл вот это. Работает, но не криво ли?
var dates = new Array('28-06-2014','05-07-2014');
$(function(){
$("#datepicker").datepicker({
//Дополнительные параметры
dateFormat: "dd-mm-yy",
altField: "#datepicker_hid", altFormat: "yy-mm-dd", //формат даты для передачи php-скрипту
minDate: "+1",
beforeShowDay: disable
});
});
function disable (d) {
var dat = $.datepicker.formatDate("dd-mm-yy", d);
for (var i=0; i < dates.length; i++){
if ($.inArray(dat, dates)!=-1) return [true];
else return [false];
}
}
Гляньте, если не лень... |
Эдди,
:-? ...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style type="text/css">
body{
font-size: 12px;
}
.active .ui-state-default{
background: rgba(102, 255, 102, 1)
}
.active:hover .ui-state-default{
background: rgba(255, 255, 0, 1)
}
</style>
<script>
$(function() {
$.datepicker.regional['ru'] = {
closeText: 'Закрыть',
prevText: '<Пред',
nextText: 'След>',
currentText: 'Сегодня',
monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь', 'Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн', 'Июл','Авг','Сен','Окт','Ноя','Дек'],
dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'],
dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'],
dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
dateFormat: 'dd.mm.yy',
firstDay: 1,
isRTL: false,
showOtherMonths:true,
selectOtherMonths:true,
changeMonth:true,
changeYear: false,
showAnim:"scale"
};
var dates = ['28-06-2014','05-07-2014'];
$.datepicker.setDefaults($.datepicker.regional['ru']);
$( '#datepicker' ).datepicker({
dateFormat: "dd-mm-yy",
altField: "#datepicker_hid", altFormat: "yy-mm-dd", //формат даты для передачи php-скрипту
minDate: "+1",
beforeShowDay: disable});
function disable(date) {
for (var i=0; i<dates.length; i++) { var d = dates[i].split("-");
if (date.getTime() == (new Date(d[2],d[1]-1,d[0])).getTime()) return[true, "active", "Важная дата"]; }
return[false, ""];}
})
</script>
</head>
<body> <label><input id='datepicker_hid'> Скрытое поле для отправки на сервер</label>
<label><input id='datepicker'> Видимое для клиента нажать выбрать дату</label>
</body>
</html>
|
Спасибо, рони!
Но ведь как у меня, тоже работает. Главное, чтобы косяков там не было. Я по разному тестировал, ничего "грешного" не нашел. Если есть, скажи, пожалуйста. |
Эдди,
убрал всё лишнее из вашего варианта.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style type="text/css">
body{
font-size: 12px;
}
.active .ui-state-default{
background: rgba(102, 255, 102, 1)
}
.active:hover .ui-state-default{
background: rgba(255, 255, 0, 1)
}
</style>
<script>
$(function() {
$.datepicker.regional['ru'] = {
closeText: 'Закрыть',
prevText: '<Пред',
nextText: 'След>',
currentText: 'Сегодня',
monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь', 'Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн', 'Июл','Авг','Сен','Окт','Ноя','Дек'],
dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'],
dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'],
dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
dateFormat: 'dd.mm.yy',
firstDay: 1,
isRTL: false,
showOtherMonths:true,
selectOtherMonths:true,
changeMonth:true,
changeYear: false,
showAnim:"scale"
};
var dates = ['28-06-2015','05-07-2015'];
$.datepicker.setDefaults($.datepicker.regional['ru']);
$( '#datepicker' ).datepicker({
dateFormat: "dd-mm-yy",
altField: "#datepicker_hid", altFormat: "yy-mm-dd", //формат даты для передачи php-скрипту
minDate: "+1",
beforeShowDay: disable});
function disable(d) {
d = $.datepicker.formatDate("dd-mm-yy", d);
d = $.inArray(d, dates);
return [d != -1];
}
})
</script>
</head>
<body> <label><input id='datepicker_hid'> Скрытое поле для отправки на сервер</label>
<label><input id='datepicker'> Видимое для клиента нажать выбрать дату</label>
</body>
</html>
|
Спасибо большое, профессориЩЕ!
Но сейчас задам супертупой вопрос. Если будет минута и желание, ответьте, пожалуйста. :) Скрипт мой уже состоит из 1000 строк. Очень боюсь что-то испортить. В одной из функций ajax jquery получаю массив дат, которые будут использоваться в datepicker. Как сделать, чтобы он был доступен в обсуждаемой функции? Достаточно объявить массив за пределами любой функции var dates = new Array(), а потом заполнить его в функции ajax? которая получает массив из php? Будет ли этот массив доступен в функции datepicker? Извиняюсь. Работая, учусь. Не бейте сильно. |
Цитата:
|
Цитата:
|
Не могу же я без вопросов к гуру.
Вот функция анимации при ожидании ответа сервера:
//АНИМАЦИЯ ПРИ ОЖИДАНИИ ОТВЕТА СЕРВЕРА
function startLoadingAnimation() //функция запуска анимации
{
//Находим элемент с изображением загрузки и убераем его невидимость
var imgObj = $("#waiting");
imgObj.show();
//Вычисляем центр страницы, чтобы анимация оказалось в центре
var centerY = $(window).scrollTop() + ($(window).height() + imgObj.height())/2;
var centerX = $(window).scrollLeft() + ($(window).width() + imgObj.width())/2;
//Меняем координаты изображения на нужные
imgObj.offset({top:centerY, left:centerX});
}
function stopLoadingAnimation() //функция останавливающая анимацию
{
$("#waiting").hide(); //просто скрываем анимацию
}
Но если страница не помещается в экран, то изображение выводится в центр целой страницы. То есть, если страница длинная, с полосой прокрутки, изображение выводится в центр не первого фрагмента, а в центр целой страницы. Не знаю, понятно ли объяснил. |
Цитата:
|
|
Эдди,
jQuery.fn.center = function()
{
var w = $(window);
this.css("position","absolute");
this.css("top",(w.height()-this.height())/2+w.scrollTop() + "px");
this.css("left",(w.width()-this.width())/2+w.scrollLeft() + "px");
return this;
}
//АНИМАЦИЯ ПРИ ОЖИДАНИИ ОТВЕТА СЕРВЕРА
function startLoadingAnimation() //функция запуска анимации
{
//Находим элемент с изображением загрузки и убераем его невидимость
$("#waiting").show().center();
}
function stopLoadingAnimation() //функция останавливающая анимацию
{
$("#waiting").hide(); //просто скрываем анимацию
}
|
Супер. только картинка все равно прокручивается вместе со страницей.
|
И последний, кажется, вопрос по календарю:
Дата выводится в input <input disabled type="text" name="datepicker" id="datepicker" value="<?=$curdate?>" style="width: 135px; margin-left: 4px; text-align: center" /> Так вот, значение инпута value игнорируется (в переменной $curdate находится сегодняшняя дата + 1 день). Не нахожу опцию в datepicker, которая устанавливала бы дату по умолчанию. А то дата выводится последняя выбранная. |
|
Эдди,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style type="text/css">
body{
font-size: 12px;
}
.active .ui-state-default{
background: rgba(102, 255, 102, 1)
}
.active:hover .ui-state-default{
background: rgba(255, 255, 0, 1)
}
</style>
<script>
$(function() {
$.datepicker.regional['ru'] = {
closeText: 'Закрыть',
prevText: '<Пред',
nextText: 'След>',
currentText: 'Сегодня',
monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь', 'Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн', 'Июл','Авг','Сен','Окт','Ноя','Дек'],
dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'],
dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'],
dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
dateFormat: 'dd.mm.yy',
firstDay: 1,
isRTL: false,
showOtherMonths:true,
selectOtherMonths:true,
changeMonth:true,
changeYear: false,
showAnim:"scale"
};
var dates = ['28-06-2014','05-07-2014'];
$.datepicker.setDefaults($.datepicker.regional['ru']);
$( '#datepicker' ).datepicker({
dateFormat: "dd-mm-yy",
altField: "#datepicker_hid", altFormat: "yy-mm-dd", //формат даты для передачи php-скрипту
minDate: "+1",
beforeShowDay: disable}).datepicker( "setDate", $( "#datepicker" )[0].defaultValue );
function disable(d) {
d = $.datepicker.formatDate("dd-mm-yy", d);
d = $.inArray(d, dates);
return [d != -1];
}
})
</script>
</head>
<body> <label><input id='datepicker_hid'> Скрытое поле для отправки на сервер</label>
<label><input id='datepicker' value='28-06-2014'> Видимое для клиента нажать выбрать дату</label>
</body>
</html>
|
| Часовой пояс GMT +3, время: 19:48. |