Datetimepicker.js用法

$('.form_date').datetimepicker({//初始化
    language:  'zh-CN',
    //weekStart: 1,
    //todayBtn:  1,
    autoclose: 1,
    //todayHighlight: 1,
    //startView: 2,
    //minView: 2,
    //forceParse: 0,
    format: 'yyyy-mm-dd',//格式化想要顯示的時間格式
    minView: 'month'//日期時間選擇器所能夠提供的最精確的時間選擇視圖。
});

$('.form_date').datetimepicker("update",'2015-01-22');//賦值

$('.form_date').datetimepicker('setDate',(new Date()));//賦值，當前日期

var year = $('.form_date').datetimepicker('getDate').getFullYear();//獲取年
var month = $('.form_date').datetimepicker('getDate').getMonth();//獲取月
var day = $('.form_date').datetimepicker('getDate').getDate();//獲取日

var hours = $('.form_date').datetimepicker('getDate').getHours();//獲取小時
var minute = $('.form_date').datetimepicker('getDate').getMinutes();//獲取分鍾
var seconde = $('.form_date').datetimepicker('getDate').getSeconds();//獲取秒

$('#datetimepicker').datetimepicker({
     value: ''                   // 設置當前datetimepicker的值
     rtl: false,                    // false   默認顯示方式   true timepicker和datepicker位置變換
     format:    'Y/m/d H:i',     // 設置時間年月日時分的格式 如: 2016/11/15 18:00
     formatTime:    'H:i',       // 設置時間時分的格式
     formatDate:    'Y/m/d',     // 設置時間年月日的格式
     startDate: false,         // new Date(), '1986/12/08', '-1970/01/05','-1970/01/05',
     step: 10,                    // 設置時間時分的間隔
     closeOnDateSelect: false,      // true 設置datepicker可點擊   false 設置datepicker不可點擊 實際上可以雙擊
     closeOnTimeSelect: true,       // true 設置timepicker可點擊   false 設置timepicker不可點擊 
     closeOnWithoutClick: true,     // true 設置點擊input可以隱藏datetimepicker   false 設置點擊input不可以隱藏datetimepicker  
     closeOnInputClick: true,      // true 設置點擊input可以隱藏datetimepicker   false 設置點擊input不可以隱藏datetimepicker  (會有閃動 先隱藏 再顯示)
     timepicker: true,            // true 顯示timepicker   false 隱藏timepicker
     datepicker: true,            // true 顯示datepicker   false 隱藏datepicker
     weeks: false,                // true 顯示周數   false 隱藏周數
     defaultTime: false,            // 如果輸入值為空 可用來設置默認顯示時間 use formatTime format (ex. '10:00' for formatTime:   'H:i') 
     defaultDate: false,            // 如果輸入值為空 可用來設置默認顯示日期 use formatDate format (ex new Date() or '1986/12/08' or '-1970/01/05' or '-1970/01/05')
     minDate: false,                // 設置datepicker最小的限制日期   如：2016/08/15
     maxDate: false,                // 設置datepicker最大的限制日期   如：2016/11/15
     minTime: false,                // 設置timepicker最小的限制時間   如：08:00
     maxTime: false,              // 設置timepicker最大的限制時間   如：18:00
     allowTimes: [],                // 設置timepicker顯示的時間   如：allowTimes:['09:00','11:00','12:00','21:00']
     opened: false,              // false默認打開datetimepicker可關閉  true打開datetimepicker后不可關閉
     initTime: true,                // 設置timepicker默認時間   如：08:00
     inline: false,             // ture設置datetimepicker一直顯示
     theme: '',                  // ture設置datetimepicker顯示樣式 如: 'dark'
     withoutCopyright: true,        // ture默認隱藏左下角'xdsoft.net'鏈接  false 顯示左下角'xdsoft.net'鏈接 
     inverseButton: false,          // false 默認   true datepicker的上一月和下一月功能互換  timepicker的上下可點擊按鈕功能互換
     hours12: false,                // true設置12小時格式  false設置24小時格式
     next: 'xdsoft_next',           // 設置datepicker上一月按鈕的樣式
     prev : 'xdsoft_prev',        // 設置datepicker下一月按鈕的樣式
     dayOfWeekStart: 0,            // 設置默認第-列為周幾 如：0 周日  1 周一
     parentID: 'body',            // 設置父級選擇器
     timeHeightInTimePicker: 25,    // 設置timepicker的行高
     timepickerScrollbar: true,  // ture設置timepicker顯示滑動條  false設置timepicker不顯示滑動條
     todayButton: true,            // ture顯示今天按鈕  false不顯示今天按鈕   位置在datepicker左上角
     prevButton: true,              // ture顯示上一月按鈕  false不顯示上一月按鈕   位置在datepicker左上角
     nextButton: true,          // ture顯示下一月按鈕  false不顯示下一月按鈕   位置在datepicker又上角
     scrollMonth: true,             // ture 設置datepicker的月份可以滑動  false設置datepicker的月份不可以滑動
     lazyInit: false,              // 翻譯： 初始化插件發生只有當用戶交互。大大加速插件與大量的領域的工作
     mask: false,                  // 使用輸入掩碼。真正的-自動生成一個字段的“格式”的面具，從0到9的數字，設置為值的最高可能的數字。例如：第一個小時的數字不能大於2，而第一位數字不能大於5  如：{mask:'9999/19/39 29:59',format:'Y/m/d H:i'}
     validateOnBlur: true,        // 失去焦點時驗證datetime值輸入,。如果值是無效的datetime,然后插入當前日期時間值
     yearStart: 1950,              // 設置最小的年份   
     yearEnd: 2050,              // 設置最大的年份
     monthStart: 0,              // 設置最小的月份
     monthEnd: 11,                // 設置最大的月份
     roundTime: 'round',          // 設置timepicker的計算方式  round四舍五入 ceil向上取整 floor向下取整
     allowDateRe : null,            // 設置正則表達式檢查日期 如：{format:'Y-m-d',allowDateRe:'\d{4}-(03-31|06-30|09-30|12-31)' }
     disabledDates : [],            // 設置不可點擊的日期  如：disabledDates: ['21.11.2016','22.11.2016','23.11.2016','24.11.2016','25.11.2016','26.11.2016']
     disabledWeekDays: [],          // 設置不可點擊的星期  如：disabledWeekDays:[0,3,4]
     yearOffset: 0,              // 設置偏移年份  如：2 代表當前年份加2  -2  代表當前年份減2
     beforeShowDay: null,          // 顯示datetimepicker之前可調用的方法  {beforeShowDay:function(d) {console.log("bsd"); } }
     enterLikeTab: true,            // tab按鍵均可使datetimepicker關閉  true點擊回車鍵可使datetimepicker關閉 false點擊回車鍵不可使datetimepicker關閉 
     showApplyButton: false      // 相當於確定按鈕  true顯示  false隱藏
});

簡單敘述jquery datetimepicker的相關點擊方法

/*
 *  監聽時間插件顯示時的事件
 */
$('#datetimepicker').datetimepicker({
    onShow: function(dateText, inst) {
       console.log("---已打開datetimepicker----");
    }
}); 

/*
 *  監聽時間插件關閉時的事件 
 */
$('#datetimepicker').datetimepicker({
    onClose: function(dateText, inst) {
       console.log("---已關閉datetimepicker----");
    }
}); 

/*
 *  監聽點擊日期時的事件
 */

$('#datetimepicker').datetimepicker({
    onSelectDate: function(dateText, inst) {
       console.log(dateText);
    }
}); 

/*
 *  監聽點擊時分的事件
 */

$('#datetimepicker').datetimepicker({
    onSelectTime: function(dateText, inst) {
       console.log(dateText);
    }
}); 

/*
 *  監聽點擊datepicker 上一月下一月按鈕及選擇月份點擊事件   
 */
$('#datetimepicker').datetimepicker({
    onChangeMonth: function(dateText, inst) {
       console.log(dateText);
    }
});
/*
 *  監聽獲取當前datetimepicker顯示的所有日期信息
 */
$('#datetimepicker').datetimepicker({
    onGetWeekOfYear: function(dateText, inst) {
       console.log(dateText);
    }
}); 

 /*
 *  監聽選擇年份的點擊事件
 */
$('#datetimepicker').datetimepicker({
    onChangeYear: function(dateText, inst) {
       console.log(dateText);
    }
});

 /*
 *  實時監聽你選擇的日期和時間
 */
$('#datetimepicker').datetimepicker({
    onChangeDateTime: function(dateText, inst) {
       console.log(dateText);
    }
}); 

 /*
 *  實時監聽datetimepicker上的所有事件
 */
$('#datetimepicker').datetimepicker({
    onGenerate: function(dateText, inst) {
       console.log(dateText);
    }
});

bootstrap datetimepicker 選擇月份 選擇年

//選擇年月日的       startView: 2,   minView: 2, format: 'yyyymmdd',
$('#datetimepicker').datetimepicker({
        format: 'yyyymmdd',
         weekStart: 1,
         autoclose: true,
         startView: 2,
         minView: 2,
         forceParse: false,
         language: 'zh-CN'
    });

//選擇年月的    startView: 3,   minView: 3, format: 'yyyymm',
$('#datetimepicker').datetimepicker({
        format: 'yyyymm',
         weekStart: 1,
         autoclose: true,
         startView: 3,
         minView: 3,
         forceParse: false,
         language: 'zh-CN'
    });

//選擇年的     startView: 4,   minView: 4, format: 'yyyy',
$('#datetimepicker').datetimepicker({
        format: 'yyyymm',
         weekStart: 1,
         autoclose: true,
         startView: 4,
         minView: 4,
         forceParse: false,
         language: 'zh-CN'
    });

<div class="col-md-7">  
                 <div class='input-group date form_date' >  
                    <input name="startTm" id="datetimepicker" type='text' class="form-control input-sm" readonly="readonly"/>  
                    <span class="input-group-addon input-sm">  
                      <span class="glyphicon glyphicon-calendar"></span>  
                    </span>  
                </div>   
    </div>  

<div class='input-group date form_date' data-date-format="yyyymmdd">
           <input name="startTm" id="startTm" type='text' class="form-control input-sm" readonly="readonly" />
           <span class="input-group-addon input-sm">
               <span class="glyphicon glyphicon-calendar"></span>
           </span>
       </div>

        <div class="date input-append" id="datetimepicker">
            <div class="input-group">
                <input class="form-control input-sm" readonly="readonly" type="text">
                <span class="add-on input-group-addon"><i class="icon-remove"></i></span>
                <span class="add-on input-group-addon"><i class="icon-th"></i></span>
            </div>
        </div>