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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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