Bootstrap Datepicker输入框事件失效，需实现起始日期选中弹窗提示

嘿，我明白你遇到的困扰了——Bootstrap Datepicker的原生input事件经常没办法正常响应日期选择操作，这是因为插件是通过内部逻辑更新输入框值的，并非用户直接输入触发原生事件。咱们换个思路，用插件自带的事件来实现你的需求就行！

先把你提供的HTML代码整理出来：

<div class="input-daterange input-group" id="datepicker">
  <input type="text" class="input-sm form-control" name="from" id="startdate" placeholder="From date" value="04/06/2018" />
  <span class="input-group-addon">to</span>
  <input type="text" class="input-sm form-control" name="to" id="enddate" placeholder="To date" value="04/10/2018" />
</div>

问题原因 #

Bootstrap Datepicker有自己专属的事件体系，用来监听日期选择动作，原生input事件对插件触发的日期更新并不敏感。咱们需要用插件提供的changeDate事件（部分新版本也支持change.dp事件）来替代。

解决方案代码 #

先正确初始化日期选择器，再给起始日期绑定专属事件：

// 初始化日期选择器，保持格式和输入框一致
$('#datepicker').datepicker({
  format: 'mm/dd/yyyy',
  autoclose: true // 可选，选中日期后自动关闭选择器，提升体验
});

// 给起始日期绑定changeDate事件，选中时弹出提示
$('#startdate').on('changeDate', function(e) {
  // 这里可以用alert，也可以换成Bootstrap模态框等更美观的提示
  alert('你选中了起始日期：' + e.format('mm/dd/yyyy'));
  
  // 额外福利：如果需要限制结束日期不能早于起始日期，也可以在这里处理
  // $('#enddate').datepicker('setStartDate', e.date);
});

// 如果你也需要监听结束日期的选择，同样绑定事件即可
$('#enddate').on('changeDate', function(e) {
  alert('你选中了结束日期：' + e.format('mm/dd/yyyy'));
});

额外注意事项 #

• 确保依赖引入顺序正确：先引入jQuery，再引入Bootstrap的CSS/JS，最后引入Bootstrap Datepicker的CSS/JS，顺序错了会导致插件失效。
• 如果你的日期格式和示例不同，记得修改format参数，保持和输入框的value格式完全匹配。
• 若使用的是较新版本的Datepicker，可尝试用change.dp事件替代changeDate，写法类似：$('#startdate').on('change.dp', function(e) { ... })

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