How to set third min-max relationship for jQuery UI datepicker

Question

In my application I'm using jquery datepicker for 3 date inputs, "receiveDate", "startDate" and "endDate". I already set my startDate always earlier than endDate by:

$("#WL_StartDate").attr("autocomplete", "off");
        $(function () {
            $("#WL_StartDate").datepicker({
                changeMonth: true,
                changeYear: true,
                onSelect: function (selected) {
                    $("#WL_EndDate").datepicker("option", "minDate", selected)
                },
            });
        });

        $("#WL_EndDate").attr("autocomplete", "off");
        $(function () {
            $("#WL_EndDate").datepicker({
                changeMonth: true,
                changeYear: true,
                onSelect: function (selected) {
                    $("#WL_StartDate").datepicker("option", "maxDate", selected)
                },
            });
        });

And it works well

Now I want my "receiveDate" also always earlier than my "startDate", I tried:

$("#ReceivedDate").attr("autocomplete", "off");
        $(function () {
            $("#ReceivedDate").datepicker({                   
                maxDate: '0',
                changeMonth: true,
                changeYear: true,
                onSelect: function (selected) {
                    $("#WL_StartDate").datepicker("option", "minDate", selected)
                },
            });
            });
        });

but not working, can anyone give me some ideas? Thank you!

Answer 1

Consider the following.

$(function() {
  $("#receivedDate, #startDate, #endDate").attr("autocomplete", "off");

  $("#receivedDate").datepicker({
    changeMonth: true,
    changeYear: true,
    onSelect: function(selected) {
      $("#startDate").datepicker("option", "minDate", selected);
      $("#endDate").datepicker("option", "minDate", selected);
    }
  });

  $("#startDate").datepicker({
    changeMonth: true,
    changeYear: true,
    onSelect: function(selected) {
      $("#receivedDate").datepicker("option", "maxDate", selected);
      $("#endDate").datepicker("option", "minDate", selected);
    }
  });

  $("#endDate").datepicker({
    changeMonth: true,
    changeYear: true,
    onSelect: function(selected) {
      $("#receivedDate").datepicker("option", "maxDate", selected);
      $("#startDate").datepicker("option", "maxDate", selected);
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div>
  <label for="receivedDate">Received:</label><input type="text" id="receivedDate">
  <label for="startDate">Start:</label><input type="text" id="startDate">
  <label for="endDate">End:</label><input type="text" id="endDate">
</div>

You should not need to wrap each part of code in it's own function. Just one will execute all the code.

Using the correct Selector will allow you to target more elements if you are applying the same action or setting.