bootstrap datetimepicker日期插件使用方法
Bootstrap datetimepicker是一个日期时间选择器插件，它基于Bootstrap框架和moment.js库，提供了一个方便的用户界面来选择日期和时间。本文将介绍Bootstrap datetimepicker的安装和使用方法。
一、安装
1. 安装Bootstrap框架和jQuery库。
2. 下载datetimepicker插件，可从官网或GitHub中下载。
3. 将下载的文件放到项目中，可以放到js或者vendor文件夹中。
4. 在HTML文件中引入相关的文件。
<!-- 引入jQuery库 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- 引入Bootstrap框架 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 引入moment.js库 -->
<script src="https://cdn.bootcss.com/moment.js/2.18.1/moment.min.js"></script>
<!-- 引入datetimepicker插件 -->
<link href="path/to/datetimepicker.css" rel="stylesheet" />
<script src="path/to/datetimepicker.js"></script>
二、基本使用
1. 在HTML中添加一个文本框元素，作为日期时间选择器的输入框。
<input type="text" class="form-control date-time">
2. 在JavaScript中添加初始化代码。
$('.date-time').datetimepicker();
这样就可以在页面中看到一个可用的日期时间选择器，并可以选择日期和时间。默认情况下，选择器会使用当前日期和时间作为默认值。
三、高级使用
Bootstrap datetimepicker提供了各种选项和方法，以满足不同的需求。下面是一些例子。
1. 更改日期时间格式
可以使用format选项更改日期时间格式。例如，如果要显示日期和时间，可以将格式设置为"YYYY-MM-DD HH:mm:ss"。
$('.date-time').datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss'
});
2. 使用语言包
可以使用locale选项将选择器的语言更改为其他语言（默认为英语）。可以从datetimepicker插件网站下载语言包。
$('.date-time').datetimepicker({
locale: 'zh-cn'
});
3. 显示时间选择器和日期选择器分别
可以使用sideBySide选项，将日期选择器和时间选择器显示在不同的列中。
$('.date-time').datetimepicker({
sideBySide: true
});
4. 隐藏日期时间选择器
可以使用format选项将日期时间选择器转换为时间选择器或日期选择器。
（1）只显示时间选择器。
$('.date-time').datetimepicker({
format: 'HH:mm'
});
（2）只显示日期选择器。
$('.date-time').datetimepicker({
format: 'YYYY-MM-DD'
});
5. 开启和关闭自动关闭功能
可以使用autoclose选项开启或关闭选择器的自动关闭功能。
$('.date-time').datetimepicker({
autoclose: true
});
6. 限制日期选择范围
可以使用minDate和maxDate选项，限制用户选择的日期范围。
（1）仅允许选择今天之前的日期。
$('.date-time').datetimepicker({
maxDate: moment()
});
（2）仅允许选择今天之后的日期。
$('.date-time').datetimepicker({
minDate: moment()
});
7. 更改最小视图
可以使用viewMode选项更改选择器的最小视图。
（1）仅允许选择小时。
$('.date-time').datetimepicker({
viewMode: 'hours'
});
（2）仅允许选择天。
$('.date-time').datetimepicker({
viewMode: 'days'
});
除了上述选项和方法，Bootstrap datetimepicker还提供了许多其他选项和方法，例如使用icons选项更改选择器的图标，使用useCurrent选项确定选择器的默认值等。开发人员可以根据项目需求选择相应的选项和方法。