input-group-addon span要素からのブートストラップデータピッカー値を消去しますか？

Question

私はbootstrap-datapickerを使用して日付を選択しています。日付のtextfieldは読み取り専用ですので、2つのボタンを作成する必要があります.1つは日付を選択するためのもので、もう1つはクリアすることです。私はそれが日付をクリアdoesnの `tスパン日付クリアするイベントを追加しようとするが、それは、デフォルトでは、カレンダーを開いたときにここでaspxページ

<div class="form-group"> 
    <div class='input-group date' id='datetimepicker2'> 
     <asp:TextBox ID="TextBoxSecondDate" runat="server" CssClass="form-control input-md remove-glow" placeholder="Deri:"></asp:TextBox> 
     <span class="input-group-addon"> 
      <span class="fa fa-calendar"></span> 
     </span> 
     <span class="input-group-addon"> 
      <span class="fa fa-times clear-date" id="SecondDate"></span> 
     </span> 
    </div> 
</div> 

内のコードは、問題がされています。どのようなアイデアを私は問題を解決することができますか？前もって感謝します。

Answer 1

<script src="Scripts/jquery-1.9.1.min.js"></script> 
<script src="Scripts/bootstrap.min.js"></script> 
<script src="Scripts/moment.js"></script> 
<script src="Scripts/bootstrap-datetimepicker.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $('#datetimepicker1').datetimepicker({ 
      useCurrent: false, 
      format: 'DD/MM/YYYY', 
      ignoreReadonly: true 
     }); 
     $('#datetimepicker2').datetimepicker({ 
      useCurrent: false, 
      format: 'DD/MM/YYYY', 
      ignoreReadonly: true 
     }); 
     $("#datetimepicker1").on("dp.change", function (e) { 
      $('#datetimepicker2').data("DateTimePicker").minDate(e.date); 
      $("#datetimepicker1").datepicker('hide'); 
     }); 
     $("#datetimepicker2").on("dp.change", function (e) { 
      $('#datetimepicker1').data("DateTimePicker").maxDate(e.date); 
      $("#datetimepicker2").datepicker('hide'); 
     }); 

    }); 
    $(document).ready(function() { 
     $("body").on('click', ".clear-date", function() { 
      $('#datetimepicker2').data("DateTimePicker").clear(); 
     }); 
    }); 
</script> 

ここはJavaScriptのコードです。