Bootstrap日期和时间表单组件datetimepicker的使用

电玩女神 2022-06-06 07:18 364阅读 0赞

1：把项目下载到本地：

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

2：提取文件

把datetimepicker.min.css文件放到自己项目的css文件夹中

把datetimepicker.min.js文件放到自己项目的js文件夹中

3：引入到自己项目中

在需要用到该组件的html页面头部  <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">

在需要用到该组件的html页面头部  <script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>

4：自己在项目中写一个js文件用来存放中文的周、天、日的中文数组，并在页面头部 <script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js"></script>

js文件内容：

;(function($)\{  
$.fn.datetimepicker.dates\['zh-CN'\] = \{  
days: \["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"\],  
daysShort: \["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"\],  
daysMin:  \["日", "一", "二", "三", "四", "五", "六", "日"\],  
months: \["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"\],  
monthsShort: \["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"\],  
today: "今天",  
suffix: \[\],  
meridiem: \["上午", "下午"\]  
\};  
\}(jQuery));

5：在页面以代码的形式写入如下代码：

<div class="input-group date form\_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="yyyy - mm - dd" data-link-field="dtp\_input1" style="float: left; margin-right: 12px;">  
           <input class="form-control" size="16" type="text" value="" readonly style="display: inline-block; width: 134px;">  
           <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>  
</div>  
<input type="hidden" id="dtp\_input1" value="" />  
<script>  
         $('.form\_datetime').datetimepicker(\{  
            weekStart: 0, //一周从哪一天开始  
            minView:2,  
            language:'zh-CN',  
            bootcssVer:3,  
            pickerPosition:"bottom-left",  
            todayBtn:  1, //  
            autoclose: 1,  
            todayHighlight: 1,  
            startView: 2,  
            forceParse: 0,  
            showMeridian: 1  
          \});  
</script>

如果要出现小时的选择，实现代码如下，只要改变script就可以了

如果要实现不通过点击按钮才弹出而直接显示在页面，实现如下：

<div>  
        <div id="datetimepicker" style="margin: 10px 0 0 10px;"></div>  
<script>  
            $('\#datetimepicker').datetimepicker(  
                    \{  
                        todayBtn:true,  
                        minView:2,  
                        language:'zh-CN',  
                        bootcssVer:3,  
                        pickerPosition:"bottom-left"  
                    \}  
            );  
        </script>　  
    </div>