1

Есть такой набросок по диапазону дат, на jquery ui. Нужно выделить выбранный диапазон дат другим цветом. Но что-то никак, окей гугл не помог. Если не найдётся простое решение, будем писать костыль

 $(function () {
        var to;
        var from;
        var dateFormat = "dd.mm.yy";
        from = $("#fromDate")
            .datepicker({
                defaultDate: "",
                numberOfMonths: 1
            })
            .on("change", function () {
                to.datepicker( "option", "minDate", getDate( this ) );
                $("#inpFromDate").val(getDate(this));
            });
        to = $("#toDate").datepicker({
            defaultDate: "+1w",
            numberOfMonths: 1
        })
            .on("change", function () {
                console.log(Date);
                from.datepicker( "option", "maxDate", getDate( this ) );
                $("#inpToDate").val(getDate(this));
            });

        function getDate(element) {
            var date;
            try {
                date = $.datepicker.parseDate(dateFormat, element.value);
            } catch (error) {
                date = null;
            }

            return date;
        }
    });
.ui-datepicker .ui-datepicker-calendar {
  border: none;
  background: #fff;
  border-radius: 15px;
}
.ui-datepicker .ui-datepicker-calendar td a {
  border-radius: 15px;
  background: #fff;
  border: none;
  padding: 2px;
  text-align: center;
}
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a {
  border: none;
  background: #0000ff;
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"
  integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="
  crossorigin="anonymous"></script>
  
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<label for="from">From</label>
<div id="fromDate"></div>
<label for="to">to</label>
<div id="toDate"></div>
<input type="hidden" id="inpFromDate">
<input type="hidden" id="inpToDate">

2
  • 1
    Вот тут решали похожую задачу habr.com/post/303186. Или подключить любой другой плагин с возможностью выбора диапозона дат, благо их не мало. 26 окт 2018 в 13:28
  • Согласен, это примерно то что нужно, может на этом и остановимся. Но главная задача - 2 календаря
    – sinica
    26 окт 2018 в 13:47

1 ответ 1

1

По совету Артёма Кудряшова в комментарии к вопросу, Помогла статья на хабре

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.