修复Bootstrap 3.3.7中bootstrap-daterangepicker 3.0.5显示异常问题

我帮你排查了代码里的几个关键问题，这些问题是导致组件显示异常的核心原因：

• JavaScript语法错误：初始化代码里有个明显笔误——opens:'left',1 timePicker:true中的多余1，这会直接导致JS解析失败，组件无法正常初始化。
• 目标DOM元素缺失：回调函数里尝试更新$('#daterange-btn span')的内容，但你的HTML结构里根本没有这个元素，这会引发不必要的错误，也会让选择日期后的文本更新逻辑失效。
• 组件挂载容器不符合要求：daterangepicker需要绑定到可交互的输入元素（比如<input>），或者在input-group容器内包含输入框和触发按钮，你当前的空input-group容器无法让组件正确渲染UI。

修正后的完整代码 #

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.css" integrity="sha256-VVbO1uqtov1mU6f9qu/q+MfDmrqTfoba0rAE07szS20=" crossorigin="anonymous" />
</head>
<body>
  <!-- 调整容器结构，添加input和触发按钮 -->
  <div class="input-group">
    <input type="text" class="form-control" id="daterange-input">
    <div class="input-group-btn">
      <button type="button" class="btn btn-default dropdown-toggle" id="daterange-btn" data-toggle="dropdown">
        <span id="daterange-display">Last 30 Days</span>
        <span class="caret"></span>
      </button>
    </div>
  </div>
</body>
<script src="/javascripts/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" integrity="sha256-4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.js" integrity="sha256-zI6VVO07NPmVW11q3RQE42YbRmJIkkunrcQ9LEYxJsQ=" crossorigin="anonymous"></script>
<script>
// 修正语法错误，绑定到input元素，同时关联触发按钮
$('#daterange-input').daterangepicker({
  opens: 'left',
  timePicker: true,
  ranges: {
    'Today': [moment(), moment()],
    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
    'This Month': [moment().startOf('month'), moment().endOf('month')],
    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
  },
  startDate: moment().subtract(29, 'days'),
  endDate: moment()
}, function(start, end) {
  // 更新存在的DOM元素文本
  $('#daterange-display').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
});

// 点击按钮触发选择器
$('#daterange-btn').on('click', function() {
  $('#daterange-input').click();
});
</script>

修改说明 #

1. 修复了JS初始化代码中的语法错误，移除了多余的1；
2. 调整了HTML结构，添加了<input>作为组件的挂载点，同时补充了触发按钮和显示日期范围的元素；
3. 更新了回调函数中的目标DOM选择器，确保能正确更新选中的日期范围文本；
4. 添加了按钮点击触发选择器的逻辑，提升交互体验。

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