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   type="text"   class="form-control width200" placeholder="请选择开始时间" value="" >
                <input   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