根据下拉值设置 2 个日期选择器的最小日期和最大日期

Posted 2023-05-08

【中文标题】根据下拉值设置 2 个日期选择器的最小日期和最大日期

【英文标题】：Set the min date and max date of 2 datepickers based on dropdown value

【发布时间】：2019-02-07 01:55:04

【问题描述】：

我有 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()

            );

【问题讨论】：

@er-sho ，你能看看这个新帖子吗？ ***.com/questions/54904911/…

【参考方案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>

【讨论】：

但是当我使用它时，startdate 和 enddate 循环在第一个日期后关闭

你说的是哪个循环？我没有看到任何有问题的循环！

是的，它的服务器端代码。我会试着弄清楚。我认为不是因为这个。我一定犯了其他错误。我会尝试自己解决它，如果我不能，我会发布另一个问题

我再次检查了它，当第二个日期达到上述代码中的条件时，循环中断。我刚刚浏览了代码

在你的代码中添加这个$('#<%=ddlleavetype.ClientID%>').change函数，如上面的脚本所示