单击图标时的 Daterangepicker 事件答案

【问题标题】：Daterangepicker event on icon click单击图标时的 Daterangepicker 事件
【发布时间】：2018-09-07 14:30:43
【问题描述】：

使用此代码单击图标后会显示我的日历。

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。我该怎么做？

【问题讨论】：

它是用于 datepicker 的插件还是 jqueryui？
你能创建一个jsFiddle plz

标签： javascript jquery twitter-bootstrap-3 datepicker

【解决方案1】：

daterangepicker 的documentation 公开了一个您可以触发的事件，称为show.daterangepicker。你可以这样使用它：

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

P.S. 将 '#id_of_your_date_range_picker_icon' 替换为您图标的 ID 或类。

【讨论】：

【解决方案2】：

@Alexander Solonik，您的解决方案没有帮助。无论如何，谢谢你的帮助。这是我解决问题的方法^

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

【讨论】：

【解决方案3】：

$('#date2').data('daterangepicker').show()

【讨论】：