Bootstrap 4 DatePicker三大问题求助：图标尺寸、校验、自动关闭失效

Hey there! Let's tackle each of your Bootstrap 4 + datepicker issues one by one:

1. Calendar Icon Size Mismatch With Input Field #

The most common culprit here is not using Bootstrap's built-in input-group component to wrap your input and icon—this component handles alignment and sizing automatically. Here's how to fix it:

First, restructure your HTML to use input-group and wrap the icon in input-group-text (this ensures it matches the input's height and vertical alignment):

<div class="form-group row">
  <label for="depositeDate" class="col-sm-4 col-form-label">Deposit Date</label>
  <div class="col-sm-8">
    <div class="input-group">
      <input type="text" class="form-control" id="depositeDate" required>
      <div class="input-group-append">
        <span class="input-group-text">
          <!-- Replace with your calendar icon, e.g., a Font Awesome icon -->
          <i class="fa fa-calendar"></i>
        </span>
      </div>
    </div>
  </div>
</div>

If you're using a custom icon instead of a library like Font Awesome, add a quick CSS tweak to ensure perfect alignment:

.input-group-text i {
  line-height: 1;
  display: flex;
  align-items: center;
  height: 100%;
}

2. Bootstrap Validation Doesn't Trigger When Submitting Without a Date #

Bootstrap 4's form validation needs a few specific setup steps, especially when paired with a datepicker that modifies input values. Here's what you need to do:

1. Add the required attribute to your date input (as shown in the HTML above)
2. Add the novalidate attribute to your parent <form> tag to disable browser default validation and use Bootstrap's custom styles
3. Initialize validation with JavaScript, and re-trigger it when the datepicker updates the input:

$(document).ready(function() {
  // Initialize datepicker
  $('#depositeDate').datepicker({
    setDate: new Date(),
    autoclose: true
  }).on('changeDate', function() {
    // Update validation state when a date is selected
    $(this).valid();
  });

  // Bootstrap form validation setup
  $('form').on('submit', function(e) {
    e.preventDefault();
    if (this.checkValidity() === false) {
      e.stopPropagation();
    }
    $(this).addClass('was-validated');
  });
});

This ensures that if the user submits without selecting a date, Bootstrap's validation styles (red border, error messaging) will trigger correctly.

3. Autoclose Feature Not Working #

First, double-check that you're using the correct option syntax (autoclose: true—quoted strings usually work, but unquoted is more consistent with plugin standards). If that's already set, the issue might stem from:

• Conflicting jQuery plugins or custom JS blocking the close event
• Missing the datepicker's CSS file (some styles are required for the close behavior to fire)
• An outdated version of the datepicker plugin

As a fallback, you can explicitly trigger the close action when a date is selected:

$('#depositeDate').datepicker({
  setDate: new Date(),
  autoclose: true
}).on('changeDate', function(e) {
  $(this).datepicker('hide');
});

Also, make sure your script load order is correct:

1. jQuery 3.3.1
2. Bootstrap 4 CSS + JS
3. Datepicker CSS
4. Datepicker JS

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