Bootstrap Date Picker问题：初始加载未生效，需用户交互后正常

我在网站中集成Bootstrap Datepicker时遇到两个问题：

1. 用户点击日历后所有日期显示为绿色，预期仅选中的周六为绿色；
2. 预期的日期禁用/高亮效果仅在用户与日历交互后才出现，页面加载时不生效。

原初始化代码如下：

$(document).on('ready', function() {
  // disable dates on calendar      
  $('.datepicker').datepicker({
    autoclose: true,
    disable: [
      false,
      1, 2, 3, 4, 5, 6, [2023, 7, 19],
      [2023, 6, 22]
    ]
  });
});

解决步骤 #

• 修正初始化目标：将Datepicker绑定到输入框元素而非外层容器，确保组件正确关联到交互元素。
• 强制提前渲染日历：初始化后手动触发日历的显示与隐藏，让样式规则在页面加载时就完成应用。
• 修正禁用日期配置：调整disable数组的格式，确保星期几的索引正确（0=周日，6=周六），精准控制可用日期。

修正后的代码 #

JavaScript #

$(document).ready(function() {
  // 绑定到input元素初始化日期选择器
  $('#example').datepicker({
    autoclose: true,
    disable: [
      0, 1, 2, 3, 4, 5, // 禁用周日至周五
      [2023, 7, 19], // 禁用2023年8月19日（月份为0基索引）
      [2023, 6, 22]  // 禁用2023年7月22日
    ]
  });

  // 手动触发渲染，确保页面加载时样式生效
  $('#example').datepicker('show').datepicker('hide');
});

说明 #

1. 绑定目标调整：原代码绑定到.datepicker类的div容器，改为直接绑定到输入框#example，避免容器样式与Datepicker组件的冲突。
2. 强制渲染：调用datepicker('show')会触发日历的DOM生成和样式计算，随后hide()隐藏日历，用户不会看到弹窗，但样式规则已提前应用。
3. 日期配置修正：原disable数组中的false替换为0（代表周日），这样可以正确禁用周日到周五，仅保留周六为可用状态，再排除指定的周六日期。

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