首页
/ 正文

bootstrap datepicker（保姆级教程）

更新时间: 2025-04-03 16:25:07

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习，欢迎点击围观

在现代 Web 开发中，日期选择功能是表单交互的核心组成部分。无论是预约系统、日程管理，还是数据筛选场景，开发者都需要一种直观且易用的工具，让用户能够快速选择日期。Bootstrap Datepicker 作为 Bootstrap 生态中的流行插件，凭借其简洁的设计、灵活的配置和跨浏览器兼容性，成为开发者首选的解决方案。本文将从基础到进阶，结合实例代码，带您全面掌握这一工具的使用方法。

一、基础概念与安装步骤

1.1 什么是 Bootstrap Datepicker？

Bootstrap Datepicker 是一个基于 jQuery 的日期选择插件，它与 Bootstrap 框架无缝集成，提供了一套直观的日期选择界面。你可以将其想象为一个“日历管家”，负责管理用户与日期交互的流程：从显示日历、选择日期，到返回格式化的日期字符串。

1.2 安装与依赖

使用该插件前，需确保已引入以下资源：

Bootstrap CSS：负责样式基础框架。
jQuery：插件运行的核心依赖。
Bootstrap Datepicker 的 CSS 和 JS 文件：可通过 CDN 或本地文件加载。

示例代码：基础 HTML 结构

<!-- 引入依赖 -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

<!-- 表单输入框 -->
<input type="text" class="form-control" id="datePickerInput">

二、快速入门：初始化与基础功能

2.1 初始化日期选择器

通过 jQuery 选择器绑定输入框，并调用 datepicker() 方法即可初始化插件：

示例代码：初始化

$(document).ready(function() {
    $('#datePickerInput').datepicker();
});

此时，输入框会自动变为一个可点击的日期选择器，用户点击输入框后会弹出日历面板。

2.2 基础配置选项

通过传递配置对象到 datepicker() 方法，可以自定义日期选择器的行为：

常用配置项说明

配置项	描述	示例值
`format`	日期显示格式（如 "yyyy-mm-dd"）	"yyyy-mm-dd"
`startDate`	允许选择的最早日期	"2023-01-01"
`endDate`	允许选择的最晚日期	"2024-12-31"
`todayBtn`	是否显示“今日”按钮	true
`autoclose`	选择日期后是否自动关闭面板	true

示例代码：设置日期格式与范围

$('#datePickerInput').datepicker({
    format: 'yyyy-mm-dd',
    startDate: '2023-01-01',
    endDate: '2024-12-31',
    todayBtn: true,
    autoclose: true
});

三、高级功能：日期限制与格式化

3.1 限制可选日期范围

通过 beforeShowDay 回调函数，可以动态控制某些日期是否可选。例如，禁止周末选择：

示例代码：禁止周末

function disableWeekends(date) {
    var day = date.getDay();
    return [(day !== 0 && day !== 6), '']; // 0为周日，6为周六
}

$('#datePickerInput').datepicker({
    beforeShowDay: disableWeekends
});

3.2 日期格式化与解析

通过 format 配置项可自定义日期显示格式。例如，将日期格式化为“2023年12月25日”：

format: 'yyyy年mm月dd日'

此外，使用 getDate() 和 setDate() 方法可以获取或设置日期值：

// 获取选中的日期
var selectedDate = $('#datePickerInput').datepicker('getDate');

// 设置默认日期为今天
var today = new Date();
$('#datePickerInput').datepicker('setDate', today);

四、国际化与多语言支持

4.1 切换语言

Bootstrap Datepicker 默认使用英文，但可通过语言包支持多语言。例如，切换为中文：

步骤：

引入中文语言包文件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>

在初始化时指定语言：

$('#datePickerInput').datepicker({
    language: 'zh-CN'
});

4.2 自定义语言文本

若需修改特定文本（如月份名称），可通过 daysOfWeekDisabled 或直接覆盖语言对象：

$.datepicker.regional['zh-CN'] = {
    days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
    // 其他自定义配置...
};

五、事件监听与交互优化

5.1 监听日期选择事件

通过绑定 changeDate 事件，可以捕获用户选择日期后的动作：

示例代码：记录选择的日期

$('#datePickerInput').on('changeDate', function(e) {
    console.log('Selected date:', e.date); // 获取 Date 对象
    console.log('Formatted date:', e.format('yyyy-mm-dd')); // 格式化输出
});

5.2 与表单联动

在表单提交时，可通过 val() 方法获取格式化后的日期字符串：

// 提交表单时的处理
$('#myForm').on('submit', function() {
    var selectedDate = $('#datePickerInput').val();
    if (!selectedDate) {
        alert('请选择日期！');
        return false;
    }
});

六、常见问题与解决方案

6.1 日期选择器不显示

可能原因：

未正确引入依赖文件（如 jQuery 或 CSS）。
选择器 ID 或类名与 HTML 不匹配。

解决方案：

检查浏览器控制台是否有错误提示。
确保 DOM 元素在页面加载后初始化插件。

6.2 日期格式不生效

常见误区：

配置对象未正确传递给 datepicker() 方法。
使用了不支持的格式符号（如 yy-mm-dd 中的 yy）。

修复方法：

确认 format 值符合插件文档的语法规范（如 yyyy-mm-dd）。
在初始化时通过 console.log 验证配置对象是否生效。

七、实战案例：构建一个完整的日期选择表单

7.1 需求场景

假设需要创建一个用户预约系统，要求：

用户选择日期后，自动填充到输入框。
限制可选日期为未来 30 天内的工作日。
选择日期后显示确认提示。

完整代码示例

<!-- HTML 表单 -->
<div class="container">
    <h3>预约日期选择</h3>
    <div class="form-group">
        <label>请选择预约日期：</label>
        <input type="text" class="form-control" id="appointmentDate">
    </div>
    <button type="button" class="btn btn-primary" id="confirmBtn">确认预约</button>
</div>

<!-- JavaScript 逻辑 -->
<script>
$(document).ready(function() {
    // 初始化日期选择器
    $('#appointmentDate').datepicker({
        format: 'yyyy-mm-dd',
        startDate: '+0d', // 今日起
        endDate: '+30d',  // 30天内
        beforeShowDay: function(date) {
            // 禁用周末
            var day = date.getDay();
            return [(day !== 0 && day !== 6), ''];
        },
        autoclose: true
    });

    // 监听确认按钮
    $('#confirmBtn').click(function() {
        var selectedDate = $('#appointmentDate').val();
        if (!selectedDate) {
            alert('请选择日期！');
            return;
        }
        alert('您已预约：' + selectedDate);
    });
});
</script>

结论：掌握 Bootstrap Datepicker 的核心价值

通过本文，我们从基础到高级功能，逐步探索了 Bootstrap Datepicker 的使用方法与最佳实践。无论是配置日期格式、限制可选范围，还是实现多语言支持，该插件都能提供灵活的解决方案。对于开发者而言，掌握这一工具不仅能提升表单交互的用户体验，还能减少重复代码的编写。

未来，随着项目复杂度的提升，您可以进一步结合其他 Bootstrap 组件（如模态框或表单验证），构建更强大的日期选择场景。记住，实践是检验知识的最佳方式——尝试将本文的示例代码嵌入到自己的项目中，逐步优化功能，您会发现 Datepicker 的潜力远不止于此！