bootstrap:时间选择器datetimepicker调用

最新推荐文章于 2025-05-28 16:08:26 发布

github_37320188

最新推荐文章于 2025-05-28 16:08:26 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： bootstrap datetimepicker 时间选择器弹不出来

本文链接：https://blog.csdn.net/github_37320188/article/details/72452209

前端专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何使用 Bootstrap DateTimePicker 插件实现日期和时间的选择功能。包括插件的下载链接、不同选择器类型的示例代码及配置选项说明，并提供了实际项目中的引用顺序示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bootstrap-datetimepicker下载地址 http://www.bootcss.com/p/bootstrap-datetimepicker/

在index.html文件里有三种不同类型选择器，选择格式分别为xxxx-xx-xx xx:xx（年月日时间）和xxxx-xx-xx（年月日）以及xx:xx（时间）

以第一种时间选择器为例：

<label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
<div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
<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>
input type="hidden" id="dtp_input1" value="" /><br/>

</div>

调用方法:两个方面都要做到

（1）使用datetimepicker方法

$('.form_datetime').datetimepicker({
//language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1

});

上述选项（如weekStart）使用说明地址在 http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 选项导航下

（2）引入必要文件

一定注意的是：上述要引用的文件要放在引用的jquery文件后才可以，否则很可能会引起选择器弹不出来的情况

举一个实际开发中引用顺序：

<script src="../bootstrap/js/jquery-1.10.2.js"></script>（任意版本jquey好像不影响调取结果）
<!-- BOOTSTRAP SCRIPTS  -->
<script src="../bootstrap/js/bootstrap.js"></script>
<!-- CUSTOM SCRIPTS  -->
<script src="../bootstrap/js/custom.js"></script>

<script src="../bootstrap/bootstrap-datetimepicker.js"></script>（必要文件）
<script src="../bootstrap/bootstrap-datetimepicker.fr.js"></script>（必要文件）

<script type="text/javascript">（datetimepicker方法）
    $('.form_datetime').datetimepicker({
        //language:  'fr',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1,
        format:'yyyy-mm-dd hh:00:00'
    });
</script>