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

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

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

Answer 2

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或类。

Answer 3

$（'＃date2'）。data（'daterangepicker'）。show（）

图标单击上的Daterangepicker事件

3 个答案: