Datetimepicker検証が機能しません

Question

私は2 datetimepcikerのフォームを持っています：1つは開始日、もう1つは終了日です。

開始日を選択すると、終了日は開始日以上になる必要があります。

インターネットで検索してもコードが機能しません。ここで

は私のjsの関数である。ここでは

function formatFields() { 
    $('#report_startDate').datepicker({ 
     format: 'mm/dd/yyyy', 
     todayHighlight: true, 
     autoclose: true, 
     startDate: "01/01/1900", 
     endDate: "01/01/2100" 
    }); 
    $('#report_endDate').datepicker({ 
     format: 'mm/dd/yyyy', 
     todayHighlight: true, 
     autoclose: true, 
     startDate: "01/01/1900", 
     endDate: "01/01/2100" 
    }); 
    $("#report_endDate").datepicker().on("dp.change", function (e) { 
     $('#report_startDate').data("DateTimePicker").minDate(e.date); 
    }); 
} 

は2日付時刻ピッカーの私のhtmlです：ここ

<table style="width: 100%"> 
     <tr> 
      <td> 
       <div class="form-group"> 
        <label class="control-label col-sm-3" id="lb_report_startDate"></label> 
        <div class="col-sm-8 date"> 
         <div class="input-group input-append date" id="report_startDate"> 
          <input runat="server" type="text" class="form-control" name="report_startDate_datePicker" id="report_startDate_datePicker" /> 
          <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span> 
         </div> 
         <span id="report_startDate_error" class="error-message">Wrong format MM/dd/yyyy.</span> 
        </div> 
       </div> 
      </td> 
      <td> 
       <div class="form-group"> 
        <label class="control-label col-sm-3" id="lb_report_endDate"></label> 
        <div class="col-sm-8 date"> 
         <div class="input-group input-append date" id="report_endDate"> 
          <input runat="server" type="text" class="form-control" name="report_endDate_datePicker" id="report_endDate_datePicker" /> 
          <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span> 
         </div> 
         <span id="report_endDate_error" class="error-message">Wrong format MM/dd/yyyy.</span> 
        </div> 
       </div> 
      </td> 
     </tr> 
    </table> 

誰もが私のコードが悪いのかを説明することができ、どのように問題を解決するために？どうもありがとう。

function formatFields() { 
 
    $('#report_startDate').datepicker({ 
 
     format: 'mm/dd/yyyy', 
 
     todayHighlight: true, 
 
     autoclose: true, 
 
     startDate: "01/01/1900", 
 
     endDate: "01/01/2100" 
 
    }); 
 
    $('#report_endDate').datepicker({ 
 
     format: 'mm/dd/yyyy', 
 
     todayHighlight: true, 
 
     autoclose: true, 
 
     startDate: "01/01/1900", 
 
     endDate: "01/01/2100" 
 
    }); 
 
    $("#report_endDate").datepicker().on("dp.change", function (e) { 
 
     $('#report_startDate').data("DateTimePicker").minDate(e.date); 
 
    }); 
 
}

<table style="width: 100%"> 
 
     <tr> 
 
      <td> 
 
       <div class="form-group"> 
 
        <label class="control-label col-sm-3" id="lb_report_startDate"></label> 
 
        <div class="col-sm-8 date"> 
 
         <div class="input-group input-append date" id="report_startDate"> 
 
          <input runat="server" type="text" class="form-control" name="report_startDate_datePicker" id="report_startDate_datePicker" /> 
 
          <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span> 
 
         </div> 
 
         <span id="report_startDate_error" class="error-message">Wrong format MM/dd/yyyy.</span> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td> 
 
       <div class="form-group"> 
 
        <label class="control-label col-sm-3" id="lb_report_endDate"></label> 
 
        <div class="col-sm-8 date"> 
 
         <div class="input-group input-append date" id="report_endDate"> 
 
          <input runat="server" type="text" class="form-control" name="report_endDate_datePicker" id="report_endDate_datePicker" /> 
 
          <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span> 
 
         </div> 
 
         <span id="report_endDate_error" class="error-message">Wrong format MM/dd/yyyy.</span> 
 
        </div> 
 
       </div> 
 
      </td> 
 
     </tr> 
 
    </table>

Answer 1

$('#report_startDate').datepicker("option", "minDate", e.date); 

Answer 2

にあなたのjsに

$('#report_startDate').data("DateTimePicker").minDate(e.date); 

を以下のコードを変更してみてください、私は最終的に答えを見つけました。

私の関数は、変更時にdatetimepickerの間違ったイベントを呼び出しました。

My機能に変更：

function formatFields() { 
    $('#report_startDate').datepicker({ 
     format: 'mm/dd/yyyy', 
     todayHighlight: true, 
     autoclose: true, 
     startDate: "01/01/1900", 
     endDate: "01/01/2100" 
    }).on("changeDate", function (e) { 
     $('#report_endDate').datepicker('setStartDate', e.date); 
    }); 
    ; 
    $('#report_endDate').datepicker({ 
     format: 'mm/dd/yyyy', 
     todayHighlight: true, 
     autoclose: true, 
     startDate: "01/01/1900", 
     endDate: "01/01/2100" 
    }); 
} 

そして、それは動作します。

参考：Bootstrap datepicker change minDate/startDate from another datepicker