CODEWITHSUNDEEP
jqueryhtml
ONIS
ONIS

Reputation: 27

jQuery Datepicker Dependent

How would I go about on making my two datepickers dependent? Once you click and choose on the first datepicker it automatically goes to the next datepicker to choose the end date and then closes out.

This is my script:

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

These are my datepickers:

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

Upvotes: 2

Views: 449

Answers (3)

K K
K K

Reputation: 18099

Try this:

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;
      }
    });
  });

Demo :http://jsfiddle.net/lotusgodkk/csjzdbyw/10/

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

It is always better to read the docs properly. Most of the time you'll find the solution in the docs. If not, you will at least get a trick.

The show method:

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

Upvotes: 1

4b0
4b0

Reputation: 22323

You can use onSelect event for this.

$("#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">

Upvotes: 1

Hassan Ali
Hassan Ali

Reputation: 9

You can disable the second date picker and can enable it on the select or change event of first date picker like this.

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

Thank You

Upvotes: 0

Related Questions