Bootstrap3 datetimepicker控件使用实例

介绍

datetimepicker控件是基于Bootstrap3的开源jQuery插件，用于日期和时间选择。它具有用户友好的界面，易于使用和高度可定制的特点。本文将详细介绍datetimepicker控件的使用方法和示例。

安装

要使用datetimepicker控件，首先需要引入相关的库文件：

<!-- jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Bootstrap 3 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- datetimepicker -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

使用

datetimepicker控件可以通过在HTML元素中添加data属性的方式进行初始化。

以下是一个完整的datetimepicker控件示例：

<div class='input-group date' id='datetimepicker1'>
    <input type='text' class="form-control" />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

<script>
$(function () {
    $('#datetimepicker1').datetimepicker();
});
</script>

在示例中，我们使用了Bootstrap3的输入框和图标，同时将其定义为一个日期时间选择器控件。我们将控件容器定义为id为“datetimepicker1”的div元素，并在其中包含一个输入框和一个图标。在js代码中，我们使用jQuery的选择器选择了我们定义的控件容器，并调用了datetimepicker()方法进行初始化。

接下来是另一个示例，它演示如何使用datetimepicker控件来选择时间范围。

<div class="row">
    <div class='col-sm-6'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker_start'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class='col-sm-6'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker_end'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>

<script>
$(function () {
    $('#datetimepicker_start').datetimepicker({
        format: 'YYYY-MM-DD HH:mm:ss',
        locale: moment.locale('zh-cn')
    });
    $('#datetimepicker_end').datetimepicker({
        format: 'YYYY-MM-DD HH:mm:ss',
        locale: moment.locale('zh-cn'),
        useCurrent: false
    });
    $("#datetimepicker_start").on("dp.change", function (e) {
        $('#datetimepicker_end').data("DateTimePicker").minDate(e.date);
    });
    $("#datetimepicker_end").on("dp.change", function (e) {
        $('#datetimepicker_start').data("DateTimePicker").maxDate(e.date);
    });
});
</script>

该示例中，我们将页面分为两列，为每一列定义一个datetimepicker控件。在js代码中，我们规定了时间格式和区域设置。使用useCurrent选项禁用自动选择当前日期。我们还通过设置minDate和maxDate来限制时间范围。