ASP.NET Razor中eonasdan-bootstrap-datetimepicker绑定Input的change事件不触发

你遇到的核心问题是：eonasdan-bootstrap-datetimepicker组件不会触发原生的change事件，它有自己专属的日期变更事件dp.change，所以你绑定原生change事件才没反应，控制台也没有输出。

下面是修改后的可运行代码：

完整代码示例 #

<!-- 确保引入依赖：jQuery、Bootstrap CSS/JS、eonasdan-bootstrap-datetimepicker的CSS/JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/eonasdan-bootstrap-datetimepicker@4.17.47/build/css/bootstrap-datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/eonasdan-bootstrap-datetimepicker@4.17.47/build/js/bootstrap-datetimepicker.min.js"></script>

<script>
$(document).ready(function() {
  // 初始化两个日期选择器（可根据需求添加配置参数）
  $('#FirstDate').datetimepicker();
  $('#SecondDate').datetimepicker();

  // 绑定FirstDate的日期变更事件
  $('#FirstDate').on('dp.change', function(e) {
    const firstDateVal = $(this).val();
    console.log(firstDateVal); // 现在控制台会输出选中的日期值

    // 检查SecondDate是否为空，为空则同步FirstDate的日期
    if (!$('#SecondDate').val()) {
      // 使用组件API设置日期，保证组件状态同步
      $('#SecondDate').datetimepicker('date', e.date);
    }
  });
});
</script>

<div class="form-group">
  <label>First Date</label>
  <div class="input-group date">
    <input id="FirstDate" name="FirstDate" type="text" class="form-control" asp-for="FirstDate" />
    <span class="input-group-addon"></span>
  </div>
  <span asp-validation-for="FirstDate" class="error"></span>
</div>

<div class="form-group">
  <label>Second Date</label>
  <div class="input-group date">
    <input id="SecondDate" name="SecondDate" type="text" class="form-control" asp-for="SecondDate" />
    <span class="input-group-addon"></span>
  </div>
  <span asp-validation-for="SecondDate" class="error"></span>
</div>

关键说明 #

• 必须先完成datetimepicker的初始化，再绑定dp.change事件，否则事件无法被监听
• 使用组件提供的datetimepicker('date', e.date)方法设置第二个输入框的日期，而不是直接修改input的val()，这样能确保组件内部的日期状态和输入框值同步
• 如果元素不是动态生成的，直接给#FirstDate绑定事件即可，不需要通过$(document)委托

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