如何实现点击输入框或图标时Bootstrap Datepicker同时弹出？

Got it, let's get this sorted so clicking either the input field or the calendar icon pops up your date picker. The problem right now is that you've only initialized the datetimepicker directly on the #start-date input element—so the icon (in the input-group-addon span) isn't linked to the picker at all.

Here are two clean solutions:

Method 1: Initialize on the Input Group Container (Recommended) #

Bootstrap Datepicker supports initializing the plugin on the parent .input-group.date container instead of just the input. This automatically makes any click inside the container (including the input and the icon) trigger the picker.

Update your script to target the container:

$(function () {
  $('.input-group.date').datetimepicker({ 
    viewMode: 'years', 
    format: 'MM-YYYY' 
  });
});

Your existing HTML doesn't need any changes—this will just work out of the box. The input's id can stay for form submission or other uses, no conflict here.

Method 2: Manually Trigger the Picker on Icon Click #

If you prefer to keep the picker initialized on the input element, you can add a click event listener to the calendar icon that manually shows the picker.

Modify your script like this:

$(function () {
  // Initialize the picker on the input
  var datePickerInstance = $('#start-date').datetimepicker({ 
    viewMode: 'years', 
    format: 'MM-YYYY' 
  });

  // Make the icon trigger the picker
  $('.input-group-addon').on('click', function() {
    datePickerInstance.data('DateTimePicker').show();
  });
});

This explicitly tells the icon to fire the picker's show() method when clicked.

Either approach will solve your problem—Method 1 is more concise and leverages the plugin's built-in support for input groups.

内容的提问来源于stack exchange，提问作者pietà