Question

我有两个日期选择器。分别是开始日期和结束日期。如何相对于开始日期选择器选择的日期禁用结束日期选择器的过去日期。

作为示例。
如果我在开始日期日期选择器中选择了2019年11月20日，则必须禁用结束日期日期选择器中的所有以前的日期（过去日期）。

<html lang="en">
   <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
    </head>
    <body> 
    <lable>Select Start Date</lable>
    <input id="txtstartdate" />
    <lable>Select End Date</lable> 
    <input id="txtenddate" />
    <br>
</body>
</html>

Answer 1

这对我有用。

   $("#txtstartdate").datepicker({
            minDate: $("#txtstartdate").value,

            onSelect: function (date) {
                $("#txtenddate").datepicker('option', 'minDate', date);
            }
        });

        $("#txtenddate").datepicker({});

<html lang="en">
   <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
    </head>
    <body> 
    <lable>Select Start Date</lable>
    <input id="txtstartdate" />
   
    <lable>Select End Date</lable> 
    <input id="txtenddate" />
    <br>
</body>
</html>

如何根据另一个日期选择器选择的日期禁用日期选择器过去的日期

1 个答案: