图标上的Daterangepicker事件单击

Question

My calendar shows up after icon click with this code.

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

I don't have any onclick events in my JS code, but my icon have an event in google chrome console. span.input-group-addon

But daterangepicker doesn't

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

HTML code is similar in both examples.

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

I wan't to open daterangepicker on icon click. How can I do this?

Answer 1

The documentation for daterangepicker exposes a event that you can trigger called show.daterangepicker . You can use it like so:

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

PS replace '#id_of_your_date_range_picker_icon' with the ID or class of your icon.

Answer 2

@Alexander Solonik, your solution didn't help. Anyway, thank you for helping. Here is how I solved my problem^

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

Answer 3

$（ '＃date2的'）。数据（ 'daterangepicker'）。节目（）