Javascript-форум - Календарь на подобие Datepicker

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Календарь на подобие Datepicker (https://javascript.ru/forum/jquery/61660-kalendar-na-podobie-datepicker.html)

Круто, но ничего с первого прочтения не понял... Сейчас буду разбираться...

А мой код, видимо, совсем кривой? :(

На тему заливки фонов я имел в виду что-то типа этого: http://css.yoksel.ru/css-and-svg-masks/

Сейчас сам попробую вникнуть.

Мысль в том, чтобы был один графический файл с маской размером с ячейку который был бы с двумя треугольниками типа такого

только черно-белый. А дальше, я даю цвет фона как левый треугольник (прозрачный), на правый накладываю нужный цвет. А сверху виден текст с датой.

Цитата:

Сообщение от karden

Мысль в том,

для меня это слишком непонятно :) если получится, покажите ... код выше просто пример как можно из даты в миллисекундах получить строку в нужном формате, например dd.mm.yy и наоборот, ранее была ссылка на пример, там я ещё не знал, что у datepicker есть встроенный метод преобразования в обе стороны и им можно воспользоваться, поэтому парсил напрямую :lol:

Добрый вечер.

С фонами решение нашлось.

// В 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/

Все прикрутил как надо! Офигительно работает.

Тут еще одна мысль пришла в голову, но не могу понять можно ли это прикрутить.

На странице несколько элементов datepicker. Можно ли сделать так, чтобы при переключении месяца (вперед - назад) на любом из них месяц переключался на всех?

И дополнительно. Можно ли узнать какой месяц открыт в данный момент?

Спасибо.

karden,
onChangeMonthYear

Цитата:

Сообщение от 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>

Спасибо. Это прикрутил с поправкой на то, что формат даты мы поменяли и оно сразу не заработало.

Еще одну задачку не до конца понимаю как решить.

Интерфейс менеджера. Есть такой же календарь, и под ним еще таблица со списком резервов (ДАТА_НАЧАЛО ! ДАТА_КОНЕЦ ! ФИО)

И тут двойная задача:
1. При наведении мыши на дату, которая зарезервирована - подсветить все даты, относящиеся к данному резерву.
2. Подсветить строку в таблице, которая описывает этот резерв.

И наоборот при наведении мыши на строку в таблице - подсвечивать даты в календаре.

Мысли/вопросы:
1. Выделать ячейки фонами - мы не можем, т.к. они используются для выделения статусов дней. Предполагаю, что проще всего выделить цветом текста и жирным начертанием. Еще не пробовал править стили для этого, но думаю, что проблем быть не должно.

2. Технически к каждой ячейке задаем класс, который будет флагом того, что ячейка относится к тем, которые надо подсвечивать и второй класс с номером резерва (это мне не очень нравится).

3. Добавляем обработку события MouseOver и MouseOut для класса-флага. В документации datepicker этого найти не смог.

karden,
немогу представить такой календарь -- если только сразу на весь год. и хоть это и не корректно, попробуйте задавать вопросы про datepicker на http://ru.stackoverflow.com там больше специалистов знакомы с этим плагином ...

Я сейчас пробно сделал на 3 месяца (на год очень громоздко).

Попробую там поспрашивать. Спасибо.