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

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就可以了

     <script>
        $('.form_datetime').datetimepicker({
        // 设置禁用的时间段
            hoursDisabled: [0, 1, 2, 3, 4, 5, 6, 7, 8, 20, 21, 22, 23], 
            // 此数值被当做步进值用于构建小时视图。对于每个 minuteStep 都会生成一组预设时间（分钟）用于选择
                minuteStep: 30,
                weekStart: 0, //一周从哪一天开始
                language:'zh-CN',
                bootcssVer:3,
                pickerPosition:"top-left",
                todayBtn:  1, //
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                forceParse: 0,
                showMeridian: 1,
                todayBtn:false,
            });
   </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>