圖標上的Daterangepicker事件單擊

Question

單擊此代碼后，我的日歷就會顯示出來。

const initCalendar = () => {
  $('#date').datepicker({autoclose: true, format: 'dd/mm/yyyy', todayHighlight: true});
};

我的JS代碼中沒有任何onclick事件，但是我的圖標在Google chrome控制台中有一個事件。 span.input-group-addon

但是daterangepicker沒有

const initDateRangePicker = () => {
  $('#date2').daterangepicker({
    locale: {
      format: 'DD/MM/YYYY',
      cancelLabel: 'Clear'
    },
    showDropdowns: true,
    autoUpdateInput: false,
  });
};

在兩個示例中，HTML代碼都是相似的。

<div class="form-group col-md-3">
  <label class="control-label small">Date range</label>

  <div class="input-group date" id="date">
    <span class="input-group-addon btn">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>

我不會在點擊圖標時打開daterangepicker。 我怎樣才能做到這一點？

Answer 1

daterangepicker的文檔公開了一個可以觸發的事件，稱為show.daterangepicker 。 您可以這樣使用它：

$(document).on('click' , '#id_of_your_date_range_picker_icon' , function(){
    $('#date2').trigger('show.daterangepicker');
});

PS將'#id_of_your_date_range_picker_icon'替換為圖標的ID或類。

Answer 2

@Alexander Solonik，您的解決方案無濟於事。 無論如何，謝謝您的幫助。 這是我解決問題的方法^

$('.input-group-addon').click(function(event){
    event.preventDefault();
    $('#dat2').click();
});

Answer 3

$（ '＃date2的'）。數據（ 'daterangepicker'）。節目（）