如何使用Bootstrap Datepicker实现含日期、星期、月份的滑块式显示效果？

要实现示例图中的横向日期滑块（每个项展示日、星期全称、月份全称），按以下步骤操作：

1. 引入依赖资源 #

页面中需先加载jQuery、Bootstrap及Bootstrap Datepicker的相关文件：

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
<!-- Bootstrap Datepicker CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<!-- Bootstrap Datepicker JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<!-- 中文语言包（可选，用于显示中文星期/月份） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>

2. 编写HTML容器 #

添加一个用于承载日期滑块的容器：

<div class="date-slider-wrap">
  <div id="date-slider"></div>
</div>

3. 自定义CSS布局 #

通过CSS将默认的日历布局改为横向滚动的滑块样式：

.date-slider-wrap {
  width: 100%;
  overflow-x: auto;
  padding: 10px 0;
}

#date-slider .datepicker {
  width: auto;
}

#date-slider .datepicker-days {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
}

#date-slider .datepicker table tr {
  display: flex;
}

#date-slider .datepicker table tr td {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  margin: 0 5px;
  cursor: pointer;
  transition: background-color 0.2s;
}

#date-slider .datepicker table tr td.active,
#date-slider .datepicker table tr td:hover {
  background-color: #007bff;
  color: #fff;
}

#date-slider .datepicker table tr td.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

4. 初始化并配置Datepicker #

通过自定义模板和参数，让每个日期项显示所需内容：

$(document).ready(function() {
  $('#date-slider').datepicker({
    language: 'zh-CN', // 启用中文（若不需要可删除）
    inline: true,
    todayHighlight: true,
    templates: {
      day: '<div class="day-card"><span class="day-num">dd</span><span class="day-week">DD</span><span class="day-month">MM</span></div>'
    }
  });
});

5. 优化日期卡片样式 #

给自定义的日期卡片添加样式，提升排版美观度：

.day-card {
  text-align: center;
}

.day-num {
  font-size: 24px;
  font-weight: 700;
}

.day-week {
  font-size: 14px;
}

.day-month {
  font-size: 12px;
  text-transform: capitalize;
}

核心说明 #

• templates.day配置用于自定义日期单元格的HTML结构，其中dd自动替换为日期数字，DD替换为星期全称，MM替换为月份全称
• CSS通过flex布局将日历转为横向排列，容器的overflow-x: auto实现横向滚动的滑块效果
• 若不需要中文显示，移除语言包引入和language: 'zh-CN'配置即可

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