Bootstrap-Datepicker 组件标记使用指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00142/article/details/148392650

Bootstrap-Datepicker 组件标记使用指南

bootstrap-datepicker 项目地址: https://gitcode.com/gh_mirrors/boo/bootstrap-datepicker

概述

Bootstrap-Datepicker 是一个基于 Bootstrap 框架的日期选择器组件，它提供了多种灵活的标记方式以满足不同场景下的日期选择需求。本文将详细介绍该组件的各种标记模式及其使用方法。

基础输入框模式

最简单的使用方式是通过标准的文本输入框来触发日期选择器：

<input type="text" class="form-control" value="02-16-2012">

特点：

当用户点击或通过 Tab 键聚焦到输入框时，日期选择器会自动显示
需要配合 JavaScript 初始化代码才能正常工作
适合简单的日期选择需求

组件增强模式

对于需要更好视觉效果的场景，可以使用 Bootstrap 的输入组组件：

<div class="input-group date">
    <input type="text" class="form-control" value="12-02-2012">
    <div class="input-group-addon">
        <span class="glyphicon glyphicon-th"></span>
    </div>
</div>

特点：

添加了日历图标作为视觉提示
点击图标同样可以触发日期选择器
需要添加 date 类到 input-group 容器
保持了 Bootstrap 的组件风格一致性

日期范围选择模式

当需要选择日期范围时，可以使用特殊的输入组结构：

<div class="input-group input-daterange">
    <input type="text" class="form-control" value="2012-04-05">
    <div class="input-group-addon">to</div>
    <input type="text" class="form-control" value="2012-04-19">
</div>

特点：

自动创建两个关联的日期选择器
中间可以添加分隔文本（如"to"）
日期选择器之间会保持逻辑关联
注意操作方法需要分别应用到每个输入框

JavaScript 示例：

$('.input-daterange input').each(function() {
    $(this).datepicker('clearDates');
});

内联嵌入式模式

如果需要始终显示的日期选择器，可以使用内联模式：

<div data-date="12/03/2012"></div>

特点：

日期选择器会直接嵌入页面中，始终可见
不需要用户交互即可显示
适合需要常驻的日期选择场景

内联模式与隐藏字段结合

内联日期选择器常与隐藏字段配合使用，以下是一个完整示例：

HTML 结构：

<div id="datepicker" data-date="12/03/2012"></div>
<input type="hidden" id="my_hidden_input">

JavaScript 代码：

$('#datepicker').datepicker();
$('#datepicker').on('changeDate', function() {
    $('#my_hidden_input').val(
        $('#datepicker').datepicker('getFormattedDate')
    );
});

实现原理：