bootstrap-datetimepicker的使用

该组件是基于bootstrap的datetimepicker插件，所以在使用前先引入bootstrap.min.js和bootstrap.min.css，同时引入bootstrap-datetimepicker.min.js和bootstrap-datetimepicker.min.css。

另外，为了让显示的日期为中文需要引入bootstrap-datetimepicker.fr.js或者bootstrap-datepicker.zh-CN.js文件，需要在设置的时候，把language设为“zh-CN”（datetime.js）。

代码片段：

--------------html----------------------

 　　　　<div class="selectTime">
                <span>选择时间：</span>
                <input  id="starttime" type="text"   class="form-control width200" placeholder="请选择开始时间" value="" >
                <input  id="endtime" type="text"   class="form-control width200" placeholder="请选择结束时间" value="" >
        </div>

--------------js----------------------

//初始化时间组件
       //$(function(){ } 是 $(document).ready(function(){...})的简写形式

        $(function(){     
            $("#starttime").datetimepicker({
                format: 'yyyy/mm/dd',//显示格式
                startView:2,
                minView:2,
                maxView :2,
                language: 'zh-CN',
                autoclose: 1,//选择后自动关闭
                clearBtn:true,//清除按钮
                initialDate : initDate(), //初始时间
            });
            $("#endtime").datetimepicker({
                format: 'yyyy/mm/dd',//显示格式
                startView:2,
                minView:2,
                maxView :2,
                language: 'zh-CN',
                autoclose: 1,//选择后自动关闭
                clearBtn:true,//清除按钮
                initialDate : initDate(), //初始时间
            });
            
        });
//组件初始时间为当月一号
        function initDate(){
            var myDate = new Date();
            var tYear = myDate.getFullYear()
            var tMonth = myDate.getMonth()+1
            if(tMonth < 10){
                tMonth = "0" + tMonth
            }

            var currentDate = tYear + "/" + tMonth + "/01"
            return currentDate
        }

另外附上属性：

1）format    

     这个是必须要设置的。

     默认值: 'mm/dd/yyyy'

     日期格式， p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy 的任意组合。
2）weekStart

     默认值：0。一周从哪一天开始。0（星期日）到6（星期六）

3）startDate

     Date。默认值：开始时间
4）endDate

     Date。默认值：结束时间

5）daysOfWeekDisabled  一周禁用的日期

     String，Array。 默认值: '', []
6）autoclose

    Boolean。 默认值：false

    当选择一个日期之后是否立即关闭此日期时间选择器。

7）startView

     Number， String。默认值：2， 'month'。

     日期时间选择器打开之后首先显示的视图。

• 0 or 'hour' for the hour view
• 1 or 'day' for the day view
• 2 or 'month' for month view (the default)
• 3 or 'year' for the 12-month overview
• 4 or 'decade' for the 10-year overview. Useful for date-of-birth datetimepickers.

8）minView

     Number，String. 默认值：0, 'hour'。

     日期时间选择器所能够提供的最精确的时间选择视图。

9）maxView

     Number， String。 默认值：4, 'decade'

     日期时间选择器最高能展示的选择范围视图。

10）language

    String。默认值: 'en'

11）initDate

    设置初始时间

另外附上其他属性和方法链接：https://www.bootcss.com/p/bootstrap-datetimepicker/index.htm