JQuery — календарь «от» и «до»?

Question

furcifer @furcifer

JavaScript

JQuery — календарь «от» и «до»?

Здравствуйте! Помогите реализовать следующее:
Нужно сделать два календаря, в одном мы выбираем дату "от", в другом "до". Числа между "от" и "до" должны подсвечиваться другим цветом, также должно выводиться суммарное количество дней, включая от и до.

Если числа "от" и "до" в один месяц, все равно должно быть 2 календаря, и "от" можно указать только в своем календаре, "до" соответственно.
https://jsfiddle.net/jw01gosb/367/

$(function() {
  $('#date_range').datepicker({
    range: 'period', // режим - выбор периода
    numberOfMonths: 2,
    onSelect: function(dateText, inst, extensionRange) {
    	
      $('[name=startDate]').val(extensionRange.startDateText);
      $('[name=endDate]').val(extensionRange.endDateText);
    }
  });

  $('#date_range').datepicker('setDate', ['+4d', '+8d']);

 
  var extensionRange = $('#date_range').datepicker('widget').data('datepickerExtensionRange');
  if(extensionRange.startDateText) $('[name=startDate]').val(extensionRange.startDateText);
  if(extensionRange.endDateText) $('[name=endDate]').val(extensionRange.endDateText);
});

Пытался решить эту задачу с помощью JQuery UI Datepicker.
https://jqueryui.com/datepicker/#default
Его средствами получается вывести два календаря, но только 2 ближайших месяца, как сделать так, чтобы можно было выбирать каждый из месяцев (как у меня на картинке)?
И как сделать так, чтобы период дат появлялся только тогда, когда "от" и "до" были выбраны каждый в соответствующем календаре?

Заранее огромное спасибо за помощь!

Вопрос задан более трёх лет назад
2006 просмотров

2 комментария

Подписаться 2 Простой 2 комментария

Пригласить эксперта

Ответы на вопрос 1

3 комментария

furcifer @furcifer Автор вопроса

А как сделать, чтобы календари всегда имели display:block, и при это не было импута?

Написано более трёх лет назад

furcifer @furcifer Автор вопроса

Stalker_RED
Сделал так еще, то что нужно, но не могу подсветить даты между from и to

<script>
  $( function() {
    var dateFormat = "mm/dd/yy",
      from = $( "#from" )
        .datepicker({
          minDate: 0,
          numberOfMonths: 1
        })
        .on( "change", function() {
          to.datepicker( "option", "minDate", getDate( this ) );
        }),
      to = $( "#to" ).datepicker({
        numberOfMonths: 1
      })
      .on( "change", function() {
        from.datepicker( "option", "maxDate", getDate( this ) );
      });
 
    function getDate( element ) {
      var date;
      try {
        date = $.datepicker.parseDate( dateFormat, element.value );
      } catch( error ) {
        date = null;
      }
 
      return date;
    }
  } );
  </script>
</head>
<body>
 
<label for="from">From</label>
<divt type="text" id="from" name="from"></div>
<label for="to">to</label>
<div type="text" id="to" name="to"></div>
 
 
</body>

Написано более трёх лет назад

Stalker_RED @Stalker_RED

furcifer, я же привел пример, там сразу выделены даты от и до.

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

Простой
Как посчитать количество пересечений с помощью метода filter?
- 1 подписчик
- 5 часов назад
- 123 просмотра
3

ответа
JavaScript

Простой
Как реализовать логику назад вперед?
- 1 подписчик
- 8 часов назад
- 81 просмотр
0

ответов
JavaScript

+2 ещё

Средний
Как подключить вконтакте на сайт чтобы слать юзеру в вк уведомления или сообщения?
- нет подписчиков
- вчера
- 134 просмотра
1

ответ
JavaScript

+1 ещё

Сложный
Fastify долгая загрузка что можно сделать как найти причину?
- 1 подписчик
- вчера
- 52 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 24 нояб.
- 193 просмотра
2

ответа
JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- 23 нояб.
- 109 просмотров
1

ответ
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- 23 нояб.
- 728 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- 22 нояб.
- 78 просмотров
1

ответ
JavaScript

Средний
Почему не срабатывает горячая клавиша в расширение?
- 1 подписчик
- 22 нояб.
- 45 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- 22 нояб.
- 35 просмотров
0

ответов
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Выложить 75 курсов на геткурс и настроить базовые функции

26 нояб. 2024, в 02:18

15000 руб./за проект

Редизайн и доработка интернет магазина на wordPress

25 нояб. 2024, в 23:42

50000 руб./за проект

Разработка мобильного приложения с дополненной реальностью (AR)

25 нояб. 2024, в 23:32

200000 руб./за проект

У вас на картинке календарик путешественников во времени?
Stalker_RED, не)) просто в макете так было, я же описал суть

Answer 1 · 2018-06-26 16:51:00

$('#demo').daterangepicker({
    "linkedCalendars": false,
    "startDate": "06/20/2018",
    "endDate": "06/26/2018"
}, function(start, end, label) {
  console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
});

www.daterangepicker.com/#config

JQuery — календарь «от» и «до»?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт