Установите минимальную дату и максимальную дату 2 указателей даты в зависимости от выпадающего значения

Question

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

  <asp:DropDownList ID="ddlleavetype" class="textbox" onchange="ShowHideDiv()" runat="server">
   <asp:ListItem Value="">--Select--</asp:ListItem>
   <asp:ListItem Value="Casual leave">Casual leave</asp:ListItem>
   <asp:ListItem Value="Sick leave">Sick leave</asp:ListItem>
   <asp:ListItem Value="Annual leave">Annual leave</asp:ListItem>
   <asp:ListItem Value="Paternity leave">Paternity leave</asp:ListItem>
   <asp:ListItem Value="Maternity leave">Maternity leave</asp:ListItem>
    <asp:ListItem Value="Bereavement leave">Bereavement leave</asp:ListItem>
    </asp:DropDownList>

Таким образом, если я выберу случайный отпуск из раскрывающегося списка, максимальная дата datepicker2 должна быть следующим днем ​​datepicker1, а если это другой выбор из выпадающего списка, то максимальная дата datepicker2 может быть n числом дней. Ниже будет код для выбора даты.

  $('.datepicker1').datepicker({
                beforeShowDay: highlightDays,
                minDate: 1,
                dateFormat: "yy/mm/dd",
                changeMonth: true,
                changeYear: true,
                maxDate: 2020,
                onSelect: function (dateStr) {
                    var min = $(this).datepicker('getDate') || new Date();
                    var max = $(this).datepicker('getDate') || new Date();
                    max.setDate(max.getDate() + 1);
                    min.setDate(min.getDate() + 1);
                    $('.datepicker4').datepicker('option', { minDate: min, maxDate: max });
                }

            });
            $('.datepicker2').datepicker({
                beforeShowDay: highlightDays,
                //minDate: 2,
                dateFormat: "yy/mm/dd",
                changeMonth: true,
                changeYear: true,
                onSelect: function (dateStr) {
                    var max = $(this).datepicker('getDate'); 
                    $('.datepicker1').datepicker('option', { maxDate: max });
                }
                Date().getFullYear().toString()

            });

Answer 1

Вы должны получить значение в раскрывающемся списке через jquery.

<script type="text/javascript">

    $(function () {

        $(".datepicker1").datepicker({
            dateFormat: "yy/mm/dd",
            changeMonth: true,
            changeYear: true,
            //your options here
            onSelect: function (dateStr) {

                var min = $(this).datepicker('getDate') || new Date();
                var max = $(this).datepicker('getDate') || new Date();
                max.setDate(max.getDate() + 1);
                min.setDate(min.getDate() + 1);

                var selectedValue = $('#<%=ddlleavetype.ClientID%>').val();

                if (selectedValue == 'Casual leave') {
                    $(".datepicker2").datepicker('option', { minDate: min, maxDate: max });
                }
                else {
                    $(".datepicker2").datepicker('option', { minDate: null, maxDate: null });
                }
            }
        });

        $(".datepicker2").datepicker({
            dateFormat: "yy/mm/dd",
            changeMonth: true,
            changeYear: true,
            //your options here
        });

        $('#<%=ddlleavetype.ClientID%>').change(function () {

            if (this.value) {

                var min = $(".datepicker1").datepicker('getDate') || new Date();
                var max = $(".datepicker1").datepicker('getDate') || new Date();
                max.setDate(max.getDate() + 1);
                min.setDate(min.getDate() + 1);

                var selectedValue = this.value;

                if (selectedValue == 'Casual leave') {
                    $(".datepicker2").datepicker('option', { minDate: min, maxDate: max });
                }
                else {
                    $(".datepicker2").datepicker('option', { minDate: null, maxDate: null });
                }
            }
        });
    });
</script>