您的位置:首页 > Web前端 > BootStrap

bootstrap:时间选择器datetimepicker调用

2017-05-17 21:00 597 查看
bootstrap-datetimepicker下载地址 http://www.bootcss.com/p/bootstrap-datetimepicker/
在index.html文件里有三种不同类型选择器,选择格式分别为xxxx-xx-xx xx:xx(年月日时间)和xxxx-xx-xx(年月日)以及xx:xx(时间)

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

<div class="form-group">

<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)引入必要文件

<script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>

<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>

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

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

<script src="../bootstrap/js/jquery-1.10.2.js">&
4000
lt;/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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: