5分钟实现优雅日期选择：bootstrap-datepicker完全指南

你是否还在为网页中的日期选择功能头疼？繁琐的原生日期控件样式不统一，自定义实现又耗费大量开发时间。本文将带你快速掌握bootstrap-datepicker插件，5分钟内为你的Web项目添加美观、易用的日期选择功能。读完本文，你将学会：快速安装配置、基础使用方法、高级功能定制以及常见问题解决方案。

为什么选择bootstrap-datepicker

bootstrap-datepicker是一款基于Bootstrap的轻量级日期选择器插件，由uxsolutions开发维护。它提供了丰富的配置选项和灵活的使用方式，完美兼容Bootstrap 2.x和3.x版本，同时支持多种语言本地化。项目源码托管在https://gitcode.com/gh_mirrors/bo/bootstrap-datepicker，遵循Apache 2.0开源协议。

快速开始

安装准备

bootstrap-datepicker的安装非常简单，你可以通过多种方式将其集成到项目中：

1. 直接下载源码

从项目仓库获取最新代码：

git clone https://gitcode.com/gh_mirrors/bo/bootstrap-datepicker.git

2. 使用包管理工具

项目支持npm和yarn安装：

npm install bootstrap-datepicker
# 或
yarn add bootstrap-datepicker

基础引入

在HTML页面中引入必要的CSS和JS文件：

<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">

<!-- 引入日期选择器CSS -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.min.css">

<!-- 引入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- 引入Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- 引入日期选择器JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

注意：所有CDN链接均使用国内加速地址，确保在国内网络环境下的访问速度和稳定性。

基础使用方法

1. 输入框模式

最简单的使用方式是将日期选择器应用于一个输入框：

<input type="text" class="form-control" id="datepicker">

<script>
  $('#datepicker').datepicker();
</script>

这种方式会在用户点击输入框时弹出日期选择面板，选择的日期会自动填充到输入框中。

2. 组件模式

如果你希望添加一个触发按钮，可以使用组件模式：

<div class="input-group date" data-provide="datepicker">
  <input type="text" class="form-control">
  <div class="input-group-addon">
    <span class="glyphicon glyphicon-th"></span>
  </div>
</div>

这种方式不需要额外的JavaScript代码，通过data-provide="datepicker"属性即可自动初始化。

3. 内联模式

如果需要在页面中直接显示日历，可以使用内联模式：

<div id="inline-datepicker"></div>

<script>
  $('#inline-datepicker').datepicker({
    inline: true
  });
</script>

内联模式适合在控制面板或需要持续显示日期的场景使用。

高级配置选项

bootstrap-datepicker提供了丰富的配置选项，让你可以根据需求定制日期选择器的行为和外观。

日期格式

通过format选项可以自定义日期的显示格式：

$('#datepicker').datepicker({
  format: 'yyyy-mm-dd' // 年-月-日格式
});

常用的格式字符包括：

• yyyy: 四位年份
• mm: 两位月份(01-12)
• dd: 两位日期(01-31)
• d: 日期(1-31)
• m: 月份(1-12)

日期范围限制

你可以通过startDate和endDate选项限制可选日期范围：

$('#datepicker').datepicker({
  startDate: '2023-01-01', // 开始日期
  endDate: '2023-12-31'    // 结束日期
});

也可以使用相对日期：

$('#datepicker').datepicker({
  startDate: '-3d', // 三天前
  endDate: '+7d'    // 七天后
});

多日期选择

设置multidate选项可以允许用户选择多个日期：

$('#datepicker').datepicker({
  multidate: true, // 允许多选
  multidateSeparator: ', ' // 多个日期之间的分隔符
});

语言本地化

bootstrap-datepicker支持多种语言，只需引入对应的语言文件并设置language选项：

<script src="js/locales/bootstrap-datepicker.zh-CN.js"></script>

<script>
  $('#datepicker').datepicker({
    language: 'zh-CN' // 设置为中文
  });
</script>

项目提供了超过50种语言的本地化文件，存放在js/locales/目录下。

常用方法

除了配置选项外，bootstrap-datepicker还提供了一系列方法，方便你通过JavaScript控制日期选择器。

设置日期

// 设置单个日期
$('#datepicker').datepicker('setDate', '2023-05-15');

// 设置多个日期（需要先启用multidate选项）
$('#datepicker').datepicker('setDates', ['2023-05-15', '2023-05-16']);

获取日期

// 获取选中的日期
var date = $('#datepicker').datepicker('getDate');
console.log(date); // 返回Date对象

显示和隐藏

// 显示日期选择器
$('#datepicker').datepicker('show');

// 隐藏日期选择器
$('#datepicker').datepicker('hide');

销毁实例

// 销毁日期选择器实例
$('#datepicker').datepicker('destroy');

事件处理

bootstrap-datepicker触发多种事件，你可以通过这些事件来响应用户的操作：

$('#datepicker').datepicker()
  .on('changeDate', function(e) {
    // 当日期改变时触发
    console.log('选中的日期: ' + e.date);
  })
  .on('show', function() {
    // 当日期选择器显示时触发
    console.log('日期选择器已显示');
  })
  .on('hide', function() {
    // 当日期选择器隐藏时触发
    console.log('日期选择器已隐藏');
  });

常见问题解决方案

1. 与Bootstrap版本兼容性

bootstrap-datepicker针对不同版本的Bootstrap提供了不同的CSS文件：

• less/datepicker.less: 适用于Bootstrap 2.x
• less/datepicker3.less: 适用于Bootstrap 3.x
• 独立版本: 不依赖Bootstrap的独立样式

2. 自定义样式

如果需要自定义日期选择器的样式，可以通过修改LESS文件然后重新编译，或者直接覆盖CSS样式：

/* 自定义选中日期的背景色 */
.datepicker table tr td.active.day {
  background-color: #337ab7;
}

/* 自定义 hover 样式 */
.datepicker table tr td.day:hover {
  background-color: #e6e6e6;
}

3. 日期范围选择

实现日期范围选择（如开始日期和结束日期联动）是一个常见需求，可以通过以下方式实现：

<div class="row">
  <div class="col-md-6">
    <input type="text" class="form-control" id="start-date" placeholder="开始日期">
  </div>
  <div class="col-md-6">
    <input type="text" class="form-control" id="end-date" placeholder="结束日期">
  </div>
</div>

<script>
  var startDate = $('#start-date').datepicker({
    format: 'yyyy-mm-dd'
  }).on('changeDate', function(e) {
    // 当开始日期改变时，更新结束日期的最小值
    endDate.datepicker('setStartDate', e.date);
  });
  
  var endDate = $('#end-date').datepicker({
    format: 'yyyy-mm-dd'
  }).on('changeDate', function(e) {
    // 当结束日期改变时，更新开始日期的最大值
    startDate.datepicker('setEndDate', e.date);
  });
</script>

总结

bootstrap-datepicker是一个功能强大且易于使用的日期选择器插件，它提供了丰富的配置选项和灵活的使用方式，能够满足大多数Web项目的日期选择需求。通过本文的介绍，你应该已经掌握了它的基本使用方法和高级特性。

官方文档docs/index.rst提供了更详细的API参考和示例，建议在实际项目中查阅。如果你在使用过程中遇到问题，可以查看项目的README.md或提交issue获取帮助。

希望本文能帮助你快速集成优雅的日期选择功能，提升用户体验和开发效率！如果你觉得这篇文章有用，请点赞、收藏并关注，以便获取更多前端开发技巧和工具介绍。