該元件是基於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(){
            $("#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'。

日期時間選擇器開啟之後首先顯示的檢視。

8）minView

Number，String. 預設值：0, 'hour'。

日期時間選擇器所能夠提供的最精確的時間選擇檢視。

9）maxView

Number， String。 預設值：4, 'decade'

日期時間選擇器最高能展示的選擇範圍檢視。

10）todayBtn

Boolean， "linked"。 預設值： false

如果此值為true 或 "linked"，則在日期時間選擇器元件的底部顯示一個 "Today" 按鈕用以選擇當前日期。如果是true的話，"Today" 按鈕僅僅將檢視轉到當天的日期，如果是"linked"，當天日期將會被選中。

11）todayHighlight

Boolean。預設值：false。如果為true，高亮當前日期。
12）keyboardNavigationBoolean。

預設值：true

是否允許通過方向鍵改變日期。

13）language

String。預設值: 'en'

14）forceParse

Boolean。預設值：true

當選擇器關閉的時候，是否強制解析輸入框中的值。也就是說，當用戶在輸入框中輸入了不正確的日期，選擇器將會盡量解析輸入的值，並將解析後的正確值按照給定的格式format設定到輸入框中。

15）minuteStep

Number。 預設值：5

此數值被當做步進值用於構建小時檢視。對於每個 minuteStep 都會生成一組預設時間（分鐘）用於選擇。

16）pickerReferer : 不建議使用

String。預設值：'default' (other value available : 'input')

17）pickerPosition

String。 預設值：'bottom-right' (還支援 : 'bottom-left')

此選項當前只在元件實現中提供支援。通過設定選項可以講選擇器放倒輸入框下方。

18）viewSelect

Number or String。 預設值：same as minView (supported values are: 'decade', 'year', 'month', 'day', 'hour')