bootstrap datepicker(保姆级教程)

更新时间:

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

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

  • 新项目:《从零手撸:仿小红书(微服务架构)》 正在持续爆肝中,基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...点击查看项目介绍 ;
  • 《从零手撸:前后端分离博客项目(全栈开发)》 2 期已完结,演示链接: http://116.62.199.48/ ;

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

在现代 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 默认使用英文,但可通过语言包支持多语言。例如,切换为中文:

步骤:

  1. 引入中文语言包文件:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    
  2. 在初始化时指定语言:
    $('#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 需求场景

假设需要创建一个用户预约系统,要求:

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

完整代码示例

<!-- 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 的潜力远不止于此!

最新发布