【问题标题】:How to disable date picker past date according to the another date picker selected date [duplicate]如何根据另一个日期选择器选择的日期禁用日期选择器过去的日期[重复]
【发布时间】:2020-03-17 09:15:15
【问题描述】:

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

举个例子。
如果我在开始日期日期选择器中选择 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>  

【问题讨论】:

    标签: javascript jquery html date datepicker


    【解决方案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> 

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-07-03
      • 2017-03-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-01-11
      • 2019-11-29
      • 1970-01-01
      相关资源
      最近更新 更多