bootstrap 时间选择器

bootstrap时间选择器

//只选年份：
<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date'>
                    <input type='text' class="form-control"  id='datetimepicker1' />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker({ viewMode: 'years', format: 'YYYY'});
            });
        </script>
    </div>
</div>


//只选年月
<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' >
                    <input type='text' class="form-control" id='datetimepicker2' />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker2').datetimepicker({
                    locale: 'zh-cn',viewMode: 'months',format: 'YYYY/MM'
                });
            });
        </script>
    </div>
</div>

//单选年月日
<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' >
                    <input type='text' class="form-control" id='datetimepicker3'/>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker3').datetimepicker({
                    locale: 'zh-cn',viewMode: 'days',format: 'YYYY/MM/DD'
                });
            });
        </script>
    </div>
</div>

//单选年月日时
<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <input type='text' class="form-control" id='datetimepicker4'/>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker4').datetimepicker({locale: 'zh-cn'});
            });
        </script>
    </div>
</div>


//单选时
<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <input type='text' class="form-control" id='datetimepicker4a'/>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker4a').datetimepicker({locale: 'zh-cn',format: 'LT'});
            });
        </script>
    </div>
</div>


//双选时
<div class="container">
    <div class='col-md-4'>
        <div class="form-group">
            <div class='input-group date' >
                <input type='text' class="form-control" id='datetimepicker6'/>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class='col-md-4'>
        <div class="form-group">
            <div class='input-group date' >
                <input type='text' class="form-control" id='datetimepicker7'/>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker6').datetimepicker({locale: 'zh-cn', format: 'LT'});
        $('#datetimepicker7').datetimepicker({locale: 'zh-cn', format: 'LT'});
        $("#datetimepicker6").on("dp.change",function (e) {
            $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
        });
        $("#datetimepicker7").on("dp.change",function (e) {
            $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
        });
    });
</script>


//双选年月日和年月日
<div class="container">
    <div class='col-md-4'>
        <div class="form-group">
            <div class='input-group date' >
                <input type='text' class="form-control" id='datetimepicker14'/>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class='col-md-4'>
        <div class="form-group">
            <div class='input-group date' >
                <input type='text' class="form-control" id='datetimepicker15'/>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker14').datetimepicker({locale: 'zh-cn'});
        $('#datetimepicker15').datetimepicker({locale: 'zh-cn'});
        $("#datetimepicker14").on("dp.change",function (e) {
            $('#datetimepicker15').data("DateTimePicker").minDate(e.date);
        });
        $("#datetimepicker15").on("dp.change",function (e) {
            $('#datetimepicker14').data("DateTimePicker").maxDate(e.date);
        });
    });
</script>

需要引入的文件
//css
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">

//js
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/moment-with-locales.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>

链接：https://www.17sucai.com/pins/30203.html