11.06.2014, 04:18
|
|
Профессор
|
|
Регистрация: 19.06.2010
Сообщений: 279
|
|
|
Помогите с выбором календаря
Когда нет выбора - плохо.
Когда выбор слишком большой - еще хуже.
Нужен календарь для вывода дат, настраиваемый по стилям, на русском.
Но одно требование обязательно:
Аяксом получаю массив дат в будущем. То есть, есть массив дат.
Эти даты в календаре должны быть каким-то образом выделены.
Где рыть? Где искать?
На jQuery есть хорошие календари. Они позволят применить такую опцию?
Или на чистом js?
php в данном случае не хочу использовать.
Буду раз за подсказки. Заранее благодарен.
|
|
11.06.2014, 09:19
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Эдди,
http://api.jqueryui.com/datepicker/
|
Сообщение от Эдди
|
|
Нужен календарь для вывода дат, настраиваемый по стилям, на русском.
|
- есть локализация и стили
|
Сообщение от Эдди
|
То есть, есть массив дат.
Эти даты в календаре должны быть каким-то образом выделены.
|
- есть api для выделения нужных дат в выбраном/отображаемом месяце
|
|
11.06.2014, 17:16
|
|
Профессор
|
|
Регистрация: 19.06.2010
Сообщений: 279
|
|
|
Спасибо. Сейчас изучу.
Я правильно понимаю, что это тот же Datepicker UI?
Я нашел его полное описание на русском.
|
|
11.06.2014, 17:24
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от Эдди
|
|
Я правильно понимаю, что это тот же Datepicker UI?
|
да |
|
14.06.2014, 11:18
|
|
Профессор
|
|
Регистрация: 19.06.2010
Сообщений: 279
|
|
|
Установил календарь jQuery UI.
Вот только не нахожу опцию пометки определенных дат из имеющегося массива. -(
|
|
14.06.2014, 11:37
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Эдди,
<!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>
|
|
14.06.2014, 12:06
|
|
Профессор
|
|
Регистрация: 19.06.2010
Сообщений: 279
|
|
Если я понимаю, то вот эта функция за мои "чаяния" ответственна:
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, ""];}
});
|
|
14.06.2014, 12:30
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Эдди,
|
Цитата:
|
|
Функция, заданная в beforeShowDay будет вызываться непосредственно перед отображением каждого месяца (т.е. перед каждым открытием календаря, и дополнительно, при каждом "перелистывании" месяца). При этом, она будет вызвана для каждого дня отображаемого месяца в отдельности.При вызове, эта функция будет получать в качестве единственного параметра обрабатываемую дату в виде объекта Date. Результатом работы этой функции должен быть массив из следующих значений: [0] - true или false определяющие, будет ли дата переданная в параметре выбираемой; [1] - имя css-класса, который будет использован при отображения даты в календаре или "", если специфических классов применять не нужно; [2] - необязательный элемент, в котором можно задать текст для подсказки, всплывающей при наведении на ячейку даты в календаре.
|
|
|
14.06.2014, 15:45
|
|
Профессор
|
|
Регистрация: 19.06.2010
Сообщений: 279
|
|
|
Уж больше разжевать и невозможно, кажется.
Пока перешел к следующему фрагменту кода.
Но сюда вернусь.
СПАСИБО!
|
|
15.06.2014, 09:38
|
|
Профессор
|
|
Регистрация: 19.06.2010
Сообщений: 279
|
|
|
Еще вопрос. Наверное, я вас утомил.
Но не хочется сделать криво.
Календарь выдает дату в формате d-m-Y.
Просто так клиенту удобнее.
А мне надо переформатировать дату для запроса ajax к скрипту php.
Могу, конечно, уже в php разобрать строку. Но, думаю, это неправильно.
В JS есть функция (простая, иначе легче сделать в php), которая переформатирует дату в Y-m-d?
Спасибо!
|
|
|
|
