JQuery Datepicker Dependent

Как я могу сделать двух моих сборщиков свиданий зависимыми? После того, как вы нажмете и выберете первое средство выбора даты, он автоматически перейдет к следующему средству выбора даты, чтобы выбрать дату окончания, а затем закрывается.

Это мой сценарий:

 <script>
        $(function () {
            $("#dropoffdate").datepicker({
                showOtherMonths: true,
                selectOtherMonths: true,
                minDate: "Today",
                defaultDate: "Today",
            });
            $("#pickupdate").datepicker({
                showOtherMonths: true,
                selectOtherMonths: true,
                minDate: "Today",
                defaultDate: "Today"
            });
        });
    </script>

Это мои датпикеры:

<div class = "input-group mb-3">
                    <div class = "input-group-prepend">
                        <span class = "input-group-text">Pick Up Date</span>
                    </div>
                    <input type = "text" id = "pickupdate" class = "form-control">
                </div>

<div class = "input-group mb-3">
                    <div class = "input-group-prepend">
                        <span class = "input-group-text">Drop Off Date</span>
                    </div>
                    <input type = "text" id = "dropoffdate" class = "form-control">
                </div>

Что ты имеешь в виду .. можешь более понятно объяснить.

— 01.10.2018 07:00

jquery html

01.10.2018 06:56

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

191

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы можете отключить второе средство выбора даты и включить его в событии выбора или изменения первого средства выбора даты, как это.

<script>
    $(function () {
        $("#pickupdate").datepicker({
            showOtherMonths: true,
            selectOtherMonths: true,
            minDate: "Today",
            defaultDate: "Today",
            disabled: true,
        });
        $("#dropoffdate").datepicker({
            showOtherMonths: true,
            selectOtherMonths: true,
            minDate: "Today",
            defaultDate: "Today",
            onSelect: function() {
                $("#pickupdate").datepicker('enable');
            }

        }).on("change", function() {
            $("#pickupdate").datepicker('enable');
        });

    });
</script>

Спасибо

И в плагине datepicker есть метод Показать, чтобы показать это

— 01.10.2018 07:13

@RameshKithsiriHettiArachchi это средство выбора даты начальной загрузки, чтобы показать, что мы говорим о средстве выбора даты JQuery UI.

— 01.10.2018 07:16

01.10.2018 07:10

Ответ принят как подходящий

Попробуй это:

JS:

$(function() {
    $("#dropoffdate").datepicker({
      showOtherMonths: true,
      selectOtherMonths: true,
      minDate: "Today",
      defaultDate: "Today",
    })
    $("#pickupdate").datepicker({
      showOtherMonths: true,
      selectOtherMonths: true,
      minDate: "Today",
      defaultDate: "Today",
      onSelect: function(e) {
        setTimeout(function() {
          $("#dropoffdate").datepicker('show');
        }, 0)
        return false;
      }
    });
  });

Демо: http://jsfiddle.net/lotusgodkk/csjzdbyw/10/

См .: http://api.jqueryui.com/datepicker/#method-show

Всегда лучше читать документацию как следует. В большинстве случаев вы найдете решение в документации. Если нет, то получится хотя бы трюк.

Метод шоу:

Open the date picker. If the datepicker is attached to an input, the input must be visible for the datepicker to be shown.

Спасибо вам, ребята! Я просмотрел документацию по методу show, но вскоре после этого календарь исчез. Я думаю, что ваш код распространения исправил эту часть, но он переводит меня в верхнюю часть страницы всякий раз, когда я выбираю дату получения. Мне нужно прокрутить вниз, а затем выбрать дату возврата, которая успешно активируется и отображается.

— 01.10.2018 07:35

@ONIS добавить return false; после вашего кода. он перестанет мерцать.

— 01.10.2018 07:37

Стоит ли ставить это под э.стоппорацию? Если так, то я сделал это, и мерцание все еще присутствует.

— 01.10.2018 07:45

@ONIS Отметьте это jsfiddle.net/lotusgodkk/csjzdbyw/7 Просто добавьте return false вместо e.stopPropagation.

— 01.10.2018 08:06

@K K это только у меня или календарь показывает на 1 секунду и снова пропадает?

— 01.10.2018 09:00

01.10.2018 07:13

Для этого можно использовать событие onSelect.

$("#pickupdate").datepicker({
  showOtherMonths: true,
  selectOtherMonths: true,
  minDate: "Today",
  defaultDate: "Today",
  onSelect: function(selectedDate) {
    $("#dropoffdate").datepicker("option", "minDate", selectedDate);
    setTimeout(function() {
      $("#dropoffdate").datepicker('show');
    }, 16);
  }
});

$("#dropoffdate").datepicker({
  showOtherMonths: true,
  selectOtherMonths: true,
  minDate: "Today",
  defaultDate: "Today"
});

<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.1/jquery-ui.js"></script>
<input type = "text" id = "pickupdate" class = "form-control" />
<input type = "text" id = "dropoffdate" class = "form-control">

Спасибо тебе за это! Я собираюсь включить «выбранную дату» в свой код. Мне нравится, что.

— 01.10.2018 07:44

01.10.2018 07:23