bootstrap时间选择器-datetimepicker

冷英博
2023-12-01

接上一篇文章,写引用不同的js的时间选择器,参考连接:https://github.com/uxsolutions/bootstrap-datepicker

引入连接为:

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
 <script src="locales/jquery-1.8.3.min.js"  charset="UTF-8"></script>
<script src="locales/bootstrap.min.js"  charset="UTF-8"></script>
<script src="locales/bootstrap-datetimepicker.js"  charset="UTF-8"></script>
<script src="locales/bootstrap-datetimepicker.zh-CN.js"  charset="UTF-8"></script>
<script src="locales/bootstrap-datetimepicker.fr.js"  charset="UTF-8"></script>

上面引入了bootstrap-datetimepicker.zh-CN.js这个文件,所以在应用datetimepicker的时候必须要写language,

html部分:

<div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <label>选择结束时间:</label>
                <!--指定 date标记-->
                <div class='input-group date' id='datetimepicker3'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
<script>
$('#datetimepicker3').datetimepicker({
        language:  'zh-CN',
    });
</script>

下面解释一下可以添加的各个参数的意思,

language语言必须引用语言的js,比如bootstrap-datetimepicker.zh-CN.js

weekStart

时间选择器的周,从哪天开始0-6,默认0,参考图一

format

日期格式

 p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy 的任意组合

例如:format:'yyyy-mm-dd'或者format:'yyyy/mm/dd'

todayBtn

选择当天时间

true/false,默认fase

autoclose

选择一个日期后关闭时间选择器true/false,默认false

 

 类似资料: