設置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>