bootstrap-datepicker完全指南：从入门到精通的日期选择器解决方案
【免费下载链接】bootstrap-datepicker 
项目地址: https://gitcode.com/gh_mirrors/boo/bootstrap-datepicker
引言：告别日期选择的痛点
你是否还在为网页中的日期输入功能头疼？用户输入格式混乱、日期范围限制复杂、跨浏览器兼容性问题——这些问题不仅影响用户体验，更可能导致数据错误。作为开发者，你需要一个既专业又易用的日期选择解决方案。
bootstrap-datepicker作为Bootstrap生态系统中最受欢迎的日期选择插件之一，以其轻量级架构（仅需jQuery和Bootstrap依赖）、丰富的配置选项和良好的兼容性，成为解决日期输入难题的理想选择。本文将带你从基础安装到高级定制，全面掌握这款工具的使用技巧，让你在15分钟内实现专业级日期选择功能。
读完本文后，你将能够：
- 快速集成多种风格的日期选择器（输入框式、组件式、范围选择、嵌入式）
- 掌握20+核心配置项的实战应用
- 实现日期限制、高亮和禁用等高级功能
- 处理多语言本地化和日期格式化
- 熟练运用API方法和事件处理实现交互逻辑
第一章：快速上手——5分钟集成日期选择器
1.1 环境准备与安装
bootstrap-datepicker需要以下依赖环境：
- Bootstrap 2.0.4+（推荐使用3.x或4.x版本）
- jQuery 1.7.1+
安装方式对比：
| 安装方式 | 操作步骤 | 适用场景 |
|---|---|---|
| CDN引入 | 直接引用cdnjs资源 | 快速原型开发 |
| 源码安装 | 克隆仓库后引入本地文件 | 生产环境、需要定制 |
| 包管理器 | npm install bootstrap-datepicker | 模块化项目 |
推荐国内CDN配置（确保访问速度）：
<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<!-- 引入datepicker CSS -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<!-- 引入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- 引入datepicker JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
源码安装步骤：
# 克隆仓库
git clone https://gitcode.com/gh_mirrors/boo/bootstrap-datepicker.git
# 进入项目目录
cd bootstrap-datepicker
# 安装依赖
npm install
# 构建生产版本
grunt dist
1.2 四种基础样式实现
bootstrap-datepicker提供四种常用的UI样式，满足不同场景需求：
1.2.1 输入框式（Input）
最简单的实现方式，点击输入框弹出日期选择器：
<input type="text" class="form-control" id="datepicker">
<script>
$('#datepicker').datepicker();
</script>
1.2.2 组件式（Component）
带触发按钮的 Bootstrap 组件样式，适合需要明确触发按钮的场景：
<div class="input-group date" id="datepicker-component">
<input type="text" class="form-control" value="2025-09-14">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
<script>
$('#datepicker-component').datepicker();
</script>
1.2.3 日期范围选择（Date Range）
双输入框联动选择起始和结束日期：
<div class="input-group input-daterange" id="datepicker-range">
<input type="text" class="form-control" name="start" value="2025-09-01">
<div class="input-group-addon">至</div>
<input type="text" class="form-control" name="end" value="2025-09-30">
</div>
<script>
$('#datepicker-range').datepicker({
format: "yyyy-mm-dd",
autoclose: true
});
</script>
1.2.4 嵌入式（Inline）
直接嵌入页面的日历，适合需要始终可见的场景：
<div id="datepicker-inline" data-date="2025-09-14"></div>
<script>
$('#datepicker-inline').datepicker({
format: "yyyy-mm-dd",
todayHighlight: true
});
</script>
第二章：核心配置详解——定制你的日期选择器
bootstrap-datepicker提供了40+配置选项，本节将详解最常用的20个核心配置，帮助你快速实现个性化需求。
2.1 日期格式与显示（Format & Display）
format - 日期格式化
定义日期显示和输入的格式，支持多种占位符组合：
| 占位符 | 描述 | 示例 |
|---|---|---|
| d | 日（无前导零） | 5 |
| dd | 日（有前导零） | 05 |
| m | 月（无前导零） | 3 |
| mm | 月（有前导零） | 03 |
| M | 月份缩写 | Mar |
| MM | 月份全称 | March |
| yy | 两位数年份 | 25 |
| yyyy | 四位数年份 | 2025 |
常用格式示例：
// 中文日期格式
$('.datepicker').datepicker({
format: "yyyy年mm月dd日"
});
// ISO标准格式
$('.datepicker').datepicker({
format: "yyyy-mm-dd"
});
// 带星期的格式
$('.datepicker').datepicker({
format: "yyyy-mm-dd DD"
});
calendarWeeks - 显示周数
在日历左侧显示周数：
$('.datepicker').datepicker({
calendarWeeks: true
});
weekStart - 设置周起始日
默认情况下，日历从星期日（0）开始，可设置为星期一（1）等其他值：
// 设置周一为周起始日（适合中国习惯）
$('.datepicker').datepicker({
weekStart: 1
});
2.2 日期限制（Date Restrictions）
startDate & endDate - 日期范围限制
限制可选日期的范围：
// 只能选择今天及以后的日期
$('.datepicker').datepicker({
startDate: "today"
});
// 只能选择2025年1月到2025年12月
$('.datepicker').datepicker({
startDate: "2025-01-01",
endDate: "2025-12-31"
});
// 相对日期：只能选择昨天到明天
$('.datepicker').datepicker({
startDate: "-1d",
endDate: "+1d"
});
daysOfWeekDisabled - 禁用星期几
禁用特定星期几，如禁用周末：
// 禁用周日（0）和周六（6）
$('.datepicker').datepicker({
daysOfWeekDisabled: "0,6"
});
// 也可使用数组形式
$('.datepicker').datepicker({
daysOfWeekDisabled: [0,6]
});
datesDisabled - 禁用特定日期
禁用单个或多个特定日期：
// 禁用2025-10-01和2025-12-25
$('.datepicker').datepicker({
datesDisabled: ["2025-10-01", "2025-12-25"]
});
2.3 交互体验（Interaction）
autoclose - 选择后自动关闭
选择日期后自动关闭日历：
$('.datepicker').datepicker({
autoclose: true
});
todayBtn & todayHighlight - 今天按钮与高亮
显示"今天"按钮并高亮当前日期：
$('.datepicker').datepicker({
todayBtn: true, // 显示今天按钮
todayHighlight: true // 高亮今天
});
clearBtn - 清除按钮
显示清除按钮，用于清空已选日期：
$('.datepicker').datepicker({
clearBtn: true
});
keyboardNavigation - 键盘导航
允许使用箭头键导航日历：
$('.datepicker').datepicker({
keyboardNavigation: true
});
第三章：高级功能——从多日期选择到自定义视图
3.1 多日期选择（Multidate）
开启多日期选择功能，支持选择多个不连续日期：
// 无限制多选
$('.datepicker').datepicker({
multidate: true
});
// 最多选择3个日期
$('.datepicker').datepicker({
multidate: 3
});
获取选中的多个日期：
var dates = $('.datepicker').datepicker('getDates');
console.log(dates); // 返回Date对象数组
3.2 视图模式控制
startView - 初始视图
设置日历打开时的初始视图：
// 默认显示月份视图（0）
$('.datepicker').datepicker({
startView: 0
});
// 打开时显示年份视图（1）
$('.datepicker').datepicker({
startView: 1
});
// 打开时显示十年视图（2）
$('.datepicker').datepicker({
startView: 2
});
minViewMode & maxViewMode - 限制视图层级
控制用户可导航的视图层级：
// 只能在月视图选择，不能切换到年或十年视图
$('.datepicker').datepicker({
minViewMode: 0,
maxViewMode: 0
});
// 只能选择年份（年视图）
$('.datepicker').datepicker({
minViewMode: 1,
maxViewMode: 1
});
3.3 自定义日期状态（beforeShowDay）
通过beforeShowDay配置可以自定义每一天的状态，包括是否可选、添加CSS类和工具提示：
$('.datepicker').datepicker({
beforeShowDay: function(date) {
// 获取日期的年月日
var day = date.getDate();
// 禁用每月15日
if (day === 15) {
return false; // 返回false表示禁用
}
// 高亮每月10日和20日
if (day === 10 || day === 20) {
return {
enabled: true,
classes: 'highlight', // 添加CSS类
tooltip: '这是一个特殊日期' // 工具提示
};
}
// 其他日期正常显示
return true;
}
});
添加对应的CSS样式：
.highlight {
background-color: #428bca;
color: white;
}
第四章：多语言与本地化
4.1 引入语言文件
bootstrap-datepicker支持50+种语言，使用前需要引入对应的语言文件：
<!-- 引入中文语言包 -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>
4.2 配置语言
// 初始化时设置语言
$('.datepicker').datepicker({
language: 'zh-CN'
});
// 动态切换语言
$('.datepicker').datepicker('option', 'language', 'en');
4.3 自定义语言
如果内置语言不满足需求，可以自定义语言配置：
$.fn.datepicker.dates['custom'] = {
days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
daysShort: ["日", "一", "二", "三", "四", "五", "六"],
daysMin: ["日", "一", "二", "三", "四", "五", "六"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthsShort: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
today: "今天",
clear: "清除",
format: "yyyy-mm-dd",
titleFormat: "yyyy年MM月",
weekStart: 1
};
// 使用自定义语言
$('.datepicker').datepicker({
language: 'custom'
});
第五章：API方法与事件处理
5.1 常用API方法
update - 更新日期
// 更新为指定日期
$('.datepicker').datepicker('update', '2025-09-14');
// 清除日期
$('.datepicker').datepicker('update', '');
getDate & setDate - 获取和设置日期
// 获取当前选中日期
var date = $('.datepicker').datepicker('getDate');
// 设置日期
$('.datepicker').datepicker('setDate', new Date(2025, 8, 14)); // 月份从0开始
show & hide - 显示和隐藏日历
// 显示日历
$('.datepicker').datepicker('show');
// 隐藏日历
$('.datepicker').datepicker('hide');
destroy - 销毁日期选择器
$('.datepicker').datepicker('destroy');
5.2 事件处理
changeDate - 日期改变事件
当用户选择日期时触发：
$('.datepicker').on('changeDate', function(e) {
console.log('选中的日期:', e.date);
console.log('格式化后的日期:', $(this).val());
// 在日期范围选择中使用
if ($(this).hasClass('input-daterange')) {
var startDate = $('.input-daterange input:first').val();
var endDate = $('.input-daterange input:last').val();
console.log('日期范围:', startDate, '至', endDate);
}
});
show & hide - 显示隐藏事件
$('.datepicker').on('show', function() {
console.log('日历显示了');
});
$('.datepicker').on('hide', function() {
console.log('日历隐藏了');
});
clearDate - 清除日期事件
$('.datepicker').on('clearDate', function() {
console.log('日期已清除');
});
第六章：实战案例——构建企业级日期选择功能
6.1 酒店预订日期选择器
实现一个酒店预订系统的日期选择功能，包含以下特性：
- 入住和离店日期联动
- 最少入住1天，最多入住14天
- 禁用过去的日期
- 选择离店日期后自动计算价格
<div class="input-group input-daterange" id="hotel-date-range">
<input type="text" class="form-control" name="checkin" placeholder="入住日期">
<div class="input-group-addon">至</div>
<input type="text" class="form-control" name="checkout" placeholder="离店日期">
</div>
<div class="alert alert-info" id="price-info"></div>
$('#hotel-date-range').datepicker({
startDate: "today",
format: "yyyy-mm-dd",
autoclose: true
}).on('changeDate', function(e) {
var checkin = $('input[name="checkin"]').val();
var checkout = $('input[name="checkout"]').val();
// 计算天数差和价格
if (checkin && checkout) {
var start = new Date(checkin);
var end = new Date(checkout);
var days = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
// 确保最少入住1天
if (days < 1) {
$('input[name="checkout"]').val('');
$('#price-info').text('离店日期必须晚于入住日期');
return;
}
// 限制最多入住14天
if (days > 14) {
var maxDate = new Date(start);
maxDate.setDate(start.getDate() + 14);
$('input[name="checkout"]').datepicker('setDate', maxDate);
days = 14;
}
var price = days * 399; // 假设每天399元
$('#price-info').text('共' + days + '晚，总价: ' + price + '元');
}
});
6.2 工作日选择器（排除节假日）
实现一个只能选择工作日且排除法定节假日的日期选择器：
// 2025年法定节假日
var holidays = [
"2025-01-01", "2025-01-29", "2025-01-30", "2025-01-31", // 元旦和春节
"2025-04-05", "2025-05-01", "2025-06-12", // 清明、五一、端午
"2025-09-19", "2025-09-20", "2025-09-21", // 中秋
"2025-10-01", "2025-10-02", "2025-10-03" // 国庆
];
$('.workday-picker').datepicker({
startDate: "today",
daysOfWeekDisabled: [0, 6], // 禁用周末
beforeShowDay: function(date) {
// 格式化日期为yyyy-mm-dd
var dateStr = $.fn.datepicker.DPGlobal.formatDate(date, "yyyy-mm-dd", "en");
// 检查是否为节假日
if ($.inArray(dateStr, holidays) !== -1) {
return false; // 禁用节假日
}
return true;
}
});
第七章：性能优化与常见问题解决方案
7.1 性能优化建议
- 延迟初始化：对于不在首屏的日期选择器，可在用户滚动到视图时再初始化
// 使用IntersectionObserver实现延迟加载
var observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
$(entry.target).datepicker();
observer.unobserve(entry.target);
}
});
});
observer.observe(document.getElementById('lazy-datepicker'));
- 事件委托：对于动态生成的元素，使用事件委托
$(document).on('focus', '.dynamic-datepicker', function() {
$(this).datepicker().datepicker('show');
});
- 共享实例：对于多个相同配置的日期选择器，共享配置对象
var commonOptions = {
format: "yyyy-mm-dd",
autoclose: true,
todayHighlight: true
};
$('.datepicker-1').datepicker(commonOptions);
$('.datepicker-2').datepicker(commonOptions);
7.2 常见问题解决方案
问题1：在模态框(Modal)中日期选择器无法显示或位置错误
解决方案：设置container选项为模态框的ID
$('#modal-datepicker').datepicker({
container: '#myModal' // 模态框的ID
});
问题2：日期选择器在移动设备上无法正常工作
解决方案：禁用触摸键盘并优化样式
$('.datepicker').datepicker({
disableTouchKeyboard: true
});
添加响应式样式：
@media (max-width: 768px) {
.datepicker {
width: 100% !important;
font-size: 14px;
}
}
问题3：日期格式转换错误
解决方案：使用内置的格式化方法
// 将Date对象格式化为指定格式
var formattedDate = $.fn.datepicker.DPGlobal.formatDate(new Date(), "yyyy-mm-dd", "en");
总结与展望
bootstrap-datepicker作为一款成熟稳定的日期选择插件，凭借其丰富的功能、良好的兼容性和易用性，成为Web开发中处理日期输入的首选工具。本文从基础安装到高级定制，全面介绍了其核心功能和实战应用。
通过掌握本文介绍的配置选项、API方法和事件处理，你可以轻松实现各种复杂的日期选择需求，包括日期范围限制、多日期选择、自定义日期状态和多语言支持等。实战案例部分展示了如何将这些功能组合应用于实际项目中，解决酒店预订、工作日选择等常见业务场景。
未来，随着Web技术的发展，日期选择器也将朝着更轻量、更智能的方向发展。但就目前而言，bootstrap-datepicker依然是平衡功能与复杂度的最佳选择之一。建议在使用过程中关注官方仓库的更新，及时获取安全补丁和新功能。
最后，附上一些有用的资源链接，帮助你进一步深入学习：
- 官方文档：https://bootstrap-datepicker.readthedocs.io/
- GitHub仓库：https://gitcode.com/gh_mirrors/boo/bootstrap-datepicker
- 中文教程：各种技术社区的实战文章
希望本文能够帮助你更好地掌握bootstrap-datepicker的使用，提升你的Web开发效率和用户体验。如果你有任何问题或建议，欢迎在评论区留言讨论。
祝你的项目开发顺利！
【免费下载链接】bootstrap-datepicker 项目地址: https://gitcode.com/gh_mirrors/boo/bootstrap-datepicker
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
