01.03.2016, 21:00
|
Аспирант
|
|
Регистрация: 16.01.2016
Сообщений: 57
|
|
Круто, но ничего с первого прочтения не понял... Сейчас буду разбираться...
А мой код, видимо, совсем кривой?
Последний раз редактировалось karden, 01.03.2016 в 21:52.
|
|
01.03.2016, 22:23
|
Аспирант
|
|
Регистрация: 16.01.2016
Сообщений: 57
|
|
На тему заливки фонов я имел в виду что-то типа этого: http://css.yoksel.ru/css-and-svg-masks/
Сейчас сам попробую вникнуть.
Мысль в том, чтобы был один графический файл с маской размером с ячейку который был бы с двумя треугольниками типа такого только черно-белый. А дальше, я даю цвет фона как левый треугольник (прозрачный), на правый накладываю нужный цвет. А сверху виден текст с датой.
|
|
01.03.2016, 22:51
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Сообщение от karden
|
Мысль в том,
|
для меня это слишком непонятно если получится, покажите ... код выше просто пример как можно из даты в миллисекундах получить строку в нужном формате, например dd.mm.yy и наоборот, ранее была ссылка на пример, там я ещё не знал, что у datepicker есть встроенный метод преобразования в обе стороны и им можно воспользоваться, поэтому парсил напрямую
Последний раз редактировалось рони, 01.03.2016 в 23:01.
|
|
04.03.2016, 20:34
|
Аспирант
|
|
Регистрация: 16.01.2016
Сообщений: 57
|
|
Добрый вечер.
С фонами решение нашлось.
// В CSS
/* 0 - Free */
.poly1c0 .ui-state-default, .poly1c0 .ui-state-active {
background: #f9eeda;
}
.poly2c0 .ui-state-default, .poly2c0 .ui-state-active {
background-image: linear-gradient(to left top, #f9eeda 50%, transparent 50%) !important;
}
/* 1 - Reserved */
.poly1c1 .ui-state-default, .poly1c1 .ui-state-active {
background: yellow;
}
.poly2c1 .ui-state-default, .poly2c1 .ui-state-active {
background-image: linear-gradient(to left top, yellow 50%, transparent 50%) !important;
}
/* 7 - Selected */
.poly1c7 .ui-state-default, .poly1c7 .ui-state-active {
background: #AFEA70;
}
.poly2c7 .ui-state-default, .poly2c7 .ui-state-active {
background-image: linear-gradient(to left top, #AFEA70 50%, transparent 50%) !important;
}
// Стиль ячейки:
"poly1c"+PrevDayStyleFlag+" poly2c"+CurrentDayStyleFlag
И Все бы замечательно, но как только я добавляю третий вариант раскраски (тип), начинает плющить фоны (при выборе дат). В HTML-выводе все стили меняются корректно, а выводятся - нет. Нет мыслей почему так?
Код очень громоздкий, может будет проще ссылку на скрипт? http://realfarmer.ru/2/
|
|
17.03.2016, 21:18
|
Аспирант
|
|
Регистрация: 16.01.2016
Сообщений: 57
|
|
Все прикрутил как надо! Офигительно работает.
Тут еще одна мысль пришла в голову, но не могу понять можно ли это прикрутить.
На странице несколько элементов datepicker. Можно ли сделать так, чтобы при переключении месяца (вперед - назад) на любом из них месяц переключался на всех?
И дополнительно. Можно ли узнать какой месяц открыт в данный момент?
Спасибо.
|
|
17.03.2016, 23:39
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
karden,
onChangeMonthYear
|
|
18.03.2016, 00:55
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Сообщение от karden
|
Можно ли сделать так, чтобы при переключении месяца (вперед - назад) на любом из них месяц переключался на всех?
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Icon trigger</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css">
<style type="text/css">
#ui-datepicker-div{
font-size: 12px;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$(".datepicker").datepicker({
changeYear: true,
firstDay: 1,
onChangeMonthYear: function(year, month, el) {
$(".datepicker").datepicker("setDate", month + "/1/" + year);
}
});
});
</script>
</head>
<body>
<div class="datepicker"></div><div class="datepicker"></div>
</body>
</html>
|
|
19.03.2016, 11:35
|
Аспирант
|
|
Регистрация: 16.01.2016
Сообщений: 57
|
|
Спасибо. Это прикрутил с поправкой на то, что формат даты мы поменяли и оно сразу не заработало.
Еще одну задачку не до конца понимаю как решить.
Интерфейс менеджера. Есть такой же календарь, и под ним еще таблица со списком резервов (ДАТА_НАЧАЛО ! ДАТА_КОНЕЦ ! ФИО)
И тут двойная задача:
1. При наведении мыши на дату, которая зарезервирована - подсветить все даты, относящиеся к данному резерву.
2. Подсветить строку в таблице, которая описывает этот резерв.
И наоборот при наведении мыши на строку в таблице - подсвечивать даты в календаре.
Мысли/вопросы:
1. Выделать ячейки фонами - мы не можем, т.к. они используются для выделения статусов дней. Предполагаю, что проще всего выделить цветом текста и жирным начертанием. Еще не пробовал править стили для этого, но думаю, что проблем быть не должно.
2. Технически к каждой ячейке задаем класс, который будет флагом того, что ячейка относится к тем, которые надо подсвечивать и второй класс с номером резерва (это мне не очень нравится).
3. Добавляем обработку события MouseOver и MouseOut для класса-флага. В документации datepicker этого найти не смог.
|
|
19.03.2016, 12:08
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
karden,
немогу представить такой календарь -- если только сразу на весь год. и хоть это и не корректно, попробуйте задавать вопросы про datepicker на http://ru.stackoverflow.com там больше специалистов знакомы с этим плагином ...
|
|
19.03.2016, 12:39
|
Аспирант
|
|
Регистрация: 16.01.2016
Сообщений: 57
|
|
Я сейчас пробно сделал на 3 месяца (на год очень громоздко).
Попробую там поспрашивать. Спасибо.
|
|
|
|