Hey there! I totally get the frustration of seeing the date picker work and show the date in the input, but not being able to grab that value for your use case. Let's get this sorted out quickly.

First, let's work with a complete version of your HTML (since your code was cut off):

<div class="form-group">
  <label class="control-label" for="date">THE Date</label>
  <div class='input-group date' id="datepicker">
    <input type="text" class="form-control" id="date">
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>

Method 1: Use Bootstrap Datepicker's Native changeDate Event #

Bootstrap Datepicker emits its own changeDate event when a date is selected, which is the most reliable way to capture the selection. Here's how to use it:

// First, initialize the datepicker
$('#datepicker').datepicker({
  format: 'yyyy-mm-dd' // Adjust this to match your desired date format
});

// Listen for the date selection event
$('#datepicker').on('changeDate', function(e) {
  // Option 1: Grab the formatted date directly from the input
  const selectedDate = $('#date').val();
  
  // Option 2: Use the date object from the event for more control
  // const dateObj = e.date;
  // const selectedDate = `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')}`;
  
  // Show the date in an alert (your desired use case)
  alert('Selected date: ' + selectedDate);
});

Method 2: Fallback to Input's change Event #

If for some reason the changeDate event doesn't fire (unlikely, but possible if there's a version mismatch), you can listen directly to the input's change event:

// Initialize the datepicker first
$('#datepicker').datepicker({
  format: 'yyyy-mm-dd'
});

// Listen for input value changes
$('#date').on('change', function() {
  const selectedDate = $(this).val();
  alert('Selected date: ' + selectedDate);
});

Common Pitfalls to Check #

• Event Binding Order: Make sure you bind the event after initializing the datepicker. If you bind the event first, it won't attach to the initialized datepicker instance.
• Correct Selector: If you initialized the datepicker on the .input-group.date element (like in the example), bind the event to that same element. If you initialized it directly on the input, use the input's selector instead.
• Dependencies: Double-check that you've included all required files: jQuery, Bootstrap CSS/JS, and Bootstrap Datepicker CSS/JS (since you said the picker works, this is probably okay, but it's worth confirming).

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