设置DateTimePicker的最小日期为另一个DateTimePicker的选定日期

Question

我有两个文本框：txtETCdatefrom和txtETCdateto分别有datetimepicker1类和datetimepicker2：

<asp:TextBox ID="txtETCdatefrom" runat="server" CssClass="form-control datetimepicker1 col-md-6"></asp:TextBox> 
<asp:TextBox ID="txtETCdateto" runat="server" CssClass="col-md-6 datetimepicker2 form-control"></asp:TextBox> 

我使用的DateTimePicker与日期只有两个类格式（这是工作的罚款如果我将minDate设置为任何特定日期或时刻（））。 我想将datetimepicker2的最小日期设置为datetimepicker1的选定值或txtETCdatefrom的值。 我的DateTimePicker代码：

$('.datetimepicker1').datetimepicker({ 
        format: 'DD/MM/YYYY', 
        minDate: moment(), 
       });    
$('.datetimepicker2').datetimepicker({ 
        format: 'DD/MM/YYYY', 
        //minDate: moment(),     
       }); 

我搜索这件事，发现日期选择答案（使用ONSELECT（）函数）：

$('.datetimepicker1').datetimepicker({ 
      format: 'DD/MM/YYYY', 
      minDate: moment(), 
      onSelect: function (date) { 
      var date1 = $('.datetimepicker1').datetimepicker('getDate'); 
      var date = new Date(Date.parse(date1)); 
      date.setDate(date.getDate() + 1); 
      var newDate = date.toDateString(); 
      newDate = new Date(Date.parse(newDate)); 
      $('.datetimepicker2').datetimepicker("option", "minDate", newDate); 
      } 
     }); 
$('.datetimepicker2').datetimepicker({ 
        format: 'DD/MM/YYYY', 
        //minDate: moment(), 
       }); 

，但它不工作dateTimePicker的。 我也试过beforeShow（）函数，如：

$('.datetimepicker1').datetimepicker({ 
        format: 'DD/MM/YYYY', 
        minDate: moment(), 
       }); 
$('.datetimepicker2').datetimepicker({ 
        format: 'DD/MM/YYYY', 
        //minDate: moment(), 
        beforeShow: function() { 
         $(".datetimepicker2").datetimepicker("option", { 
         minDate: $(".datetimepicker1").datetimepicker('getDate') 
         }); 
        } 
       }); 

但都徒劳无功。还尝试在 Set max and min datetime in jquery datetimepicker 建议的SelectSelectDate（）和onShow（）函数不知道做错了什么。 在代码中包含这些函数后，datetimepicker不显示。 所有帮助将不胜感激。谢谢。

Answer 1

我遵循datepicker official website中的文档。

$(function() { 
 
     
 
     $('#datetimepicker1').datetimepicker({ 
 
        format: 'DD/MM/YYYY', 
 
        minDate: moment(), 
 
       });    
 
     
 
     
 
     $('#datetimepicker2').datetimepicker({ 
 
        format: 'DD/MM/YYYY', 
 
       }); 
 
     
 
     $("#datetimepicker1").on("dp.change", function (e) { 
 
      var oldDate = new Date(e.date); 
 
      var newDate = new Date(); 
 
      newDate.setDate(oldDate.getDate() + 1); 
 

 
      $('#datetimepicker2').data("DateTimePicker").minDate(newDate);   
 
     }); 
 
     
 
    });

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <link href="https://cdn.bootcss.com/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/> 
 
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> 
 
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script> 
 

 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class='col-sm-6'> 
 
       <div class="form-group"> 
 
        <div class='input-group date' id='datetimepicker1'> 
 
         <input type='text' class="form-control" /> 
 
         <span class="input-group-addon"> 
 
          <span class="glyphicon glyphicon-calendar"></span> 
 
         </span> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="row"> 
 
      <div class='col-sm-6'> 
 
       <div class="form-group"> 
 
        <div class='input-group date' id='datetimepicker2'> 
 
         <input type='text' class="form-control" /> 
 
         <span class="input-group-addon"> 
 
          <span class="glyphicon glyphicon-calendar"></span> 
 
         </span> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 

 
    <script src="https://cdn.bootcss.com/moment.js/2.18.1/moment.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>