Bootstrap-Datetimepicker 组件使用教程：构建专业日期时间选择器

组件概述

Bootstrap-Datetimepicker 是一个基于 Bootstrap 框架的日期时间选择组件，它提供了优雅的界面和丰富的功能选项，让开发者能够轻松地在网页中集成日期时间选择功能。该组件支持多种日期时间格式，具有高度可定制性，并且能够完美适配 Bootstrap 3 的设计风格。

基本使用步骤

1. 引入必要文件

要使用 Bootstrap-Datetimepicker，首先需要在页面中引入以下文件：

• Bootstrap 核心 CSS 文件
• Bootstrap-Datetimepicker 的 CSS 文件
• jQuery 库（必需依赖）
• Bootstrap 的 JavaScript 文件
• Bootstrap-Datetimepicker 的 JavaScript 文件
• 可选的本地化语言文件

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">

<script src="jquery/jquery-1.8.3.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="js/bootstrap-datetimepicker.js"></script>
<script src="js/locales/bootstrap-datetimepicker.fr.js"></script>

2. HTML 结构搭建

组件提供了三种基本类型的日期时间选择器：

日期时间选择器

<div class="input-group date form_datetime" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p">
    <input class="form-control" size="16" type="text" value="" readonly>
    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>

日期选择器

<div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy">
    <input class="form-control" size="16" type="text" value="" readonly>
    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>

时间选择器

<div class="input-group date form_time" data-date="" data-date-format="hh:ii">
    <input class="form-control" size="16" type="text" value="" readonly>
    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
</div>

3. JavaScript 初始化

通过 jQuery 选择器初始化不同类型的日期时间选择器：

// 日期时间选择器
$('.form_datetime').datetimepicker({
    weekStart: 1,
    todayBtn: 1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    forceParse: 0,
    showMeridian: 1
});

// 日期选择器
$('.form_date').datetimepicker({
    language: 'fr',
    weekStart: 1,
    todayBtn: 1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    minView: 2,
    forceParse: 0
});

// 时间选择器
$('.form_time').datetimepicker({
    language: 'fr',
    weekStart: 1,
    todayBtn: 1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 1,
    minView: 0,
    maxView: 1,
    forceParse: 0
});

核心配置选项详解

Bootstrap-Datetimepicker 提供了丰富的配置选项，下面介绍一些常用参数：

1. language: 设置语言，如 'fr' 表示法语
2. weekStart: 设置一周从哪天开始（0-6，0表示周日）
3. todayBtn: 是否显示"今天"按钮（0/1）
4. autoclose: 选择日期后是否自动关闭（0/1）
5. todayHighlight: 是否高亮显示今天（0/1）
6. startView: 初始显示的视图（0-4，分别表示小时、日、月、年和十年视图）
7. minView/maxView: 限制可选的视图范围
8. showMeridian: 是否显示上午/下午标识（12小时制）
9. format: 日期时间显示格式，如 'yyyy-mm-dd hh:ii'

高级功能

1. 日期时间格式

通过 data-date-format 属性可以自定义显示格式：

• yyyy: 四位年份
• yy: 两位年份
• mm: 两位月份
• dd: 两位日期
• hh: 两位小时（12小时制）
• HH: 两位小时（24小时制）
• ii: 两位分钟
• ss: 两位秒数
• p: 上午/下午标识

2. 视图控制

通过 startView、minView 和 maxView 可以精确控制用户能够访问的视图层级：

• 0: 小时视图
• 1: 日视图
• 2: 月视图（默认）
• 3: 年视图
• 4: 十年视图

3. 国际化支持

组件支持多语言，只需引入对应的语言文件并设置 language 选项即可实现本地化。

最佳实践

1. 响应式设计：结合 Bootstrap 的栅格系统，确保日期选择器在不同设备上都能良好显示
2. 默认值设置：通过 data-date 属性可以设置默认显示的日期时间
3. 表单集成：隐藏字段可以存储实际值，而显示字段展示格式化后的值
4. 验证处理：结合表单验证确保用户输入的有效性

常见问题解决

1. 组件不显示：检查是否正确引入了所有依赖文件，特别是 jQuery 和 Bootstrap
2. 日期格式不正确：确保 data-date-format 设置正确
3. 语言不生效：确认已引入对应的语言文件并正确设置了 language 选项
4. 事件处理问题：使用组件提供的事件API而非直接绑定DOM事件

通过本教程，您应该已经掌握了 Bootstrap-Datetimepicker 的基本使用方法和核心配置选项。这个组件功能强大但使用简单，能够为您的Web应用提供专业级的日期时间选择体验。