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

bootstrap 时间选择器

2016-02-18 09:11 465 查看
地址路径：
http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm
<!DOCTYPE html>

<html>

<head>

    <title></title>

    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">

    <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">

<style>

.dropdown-menu{top: 0%;}

</style>

</head>

<body>

<div class="container">

    <form action="" class="form-horizontal"  role="form">

        <fieldset>

            <legend>Test</legend>

            <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>
<div class="form-group">

                <label for="dtp_input2" class="col-md-2 control-label">Date Picking</label>

                <div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">

                    <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-calendar"></span></span>

                </div>
<input type="hidden" id="dtp_input2" value="" /><br/>

            </div>
<div class="form-group">

                <label for="dtp_input3" class="col-md-2 control-label">Time Picking</label>

                <div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">

                    <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-time"></span></span>

                </div>
<input type="hidden" id="dtp_input3" value="" /><br/>

            </div>

        </fieldset>

    </form>

</div>

<script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>

<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>

<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>

<script type="text/javascript">

    $('.form_datetime').datetimepicker({

        //language:  'fr',

        weekStart: 1,

        todayBtn:  1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,

        showMeridian: 1

    });
$('.form_date').datetimepicker({

        language:  'fr',

        weekStart: 1,

        todayBtn:  1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0

    });
$('.form_time').datetimepicker({

        language:  'fr',

        weekStart: 1,

        todayBtn:  1,
autoclose: 1,
todayHighlight: 1,
startView: 1,
minView: 0,
maxView: 1,
forceParse: 0

    });

</script>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航