easyUI自帶的時間插件日期選擇、月份選擇、時間選擇的使用

參考文件：點擊下載

1.日期選擇

 只要將class設置成easyui-datebox就可以了，當然前提是已經應用了easyui的js

<input type="text" class="easyui-datebox" id="datetime"> 

2.時間選擇

默認的時間選擇是精確到年月日時分秒的，只要把class設置成easyui-datetimebox就可以實現

<input type="text" id="datetime1"  class="easyui-datetimebox">  

效果如圖：

當然如果我們想自定義的話，比如定義格式：2010-03-04 02:03:56，我們在js中重寫一下自定義方法
<span style="font-family: monospace; white-space: pre; background-color: rgb(240, 240, 240);">
　　<input type="text" id="datetime1" data-options="formatter:ww3,parser:w3" class="easyui-datetimebox">
</span>

<span style="font-family: monospace; white-space: pre; background-color: rgb(240, 240, 240);">下面的js重寫了顯示的格式，然后精確到小時：</span>

<script type="text/javascript">
    function ww3(date){  
        var y = date.getFullYear();  
        var m = date.getMonth()+1;  
        var d = date.getDate();  
        var h = date.getHours();  
        var str = y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d)+':'+(h<10?('0'+h):h);  
        return str;  
    }  
    function w3(s){  
        if (!s) return new Date();  
        var y = s.substring(0,4);  
        var m =s.substring(5,7);  
        var d = s.substring(8,10);  
        var h = s.substring(11,14);  
        var min = s.substring(15,17);  
        var sec = s.substring(18,20);  
        if (!isNaN(y) && !isNaN(m) && !isNaN(d) && !isNaN(h) && !isNaN(min) && !isNaN(sec)){  
            return new Date(y,m-1,d,h,min,sec);  
        } else {  
            return new Date();  
        }  
    }  
<span style="white-space:pre">    </span></script>

上面代碼是將顯示格式變成：yyyy-mm-dd HH.也可以根據自己的需要修改上面的代碼，比如你要精確到分或者秒，都可以的。下面是效果圖：

3.月份選擇

easyui自帶的是沒有月份選擇的panel的，所以我們需要修改一下源代碼：

<input type="text" id="datetime1"  class="easyui-datetimebox"> 

然后在js中：

    $(function() {      
          $('#datetime1').datebox({    
                onShowPanel : function() {// 顯示日趨選擇對象后再觸發彈出月份層的事件，初始化時沒有生成月份層    
                    span.trigger('click'); // 觸發click事件彈出月份層    
                    if (!tds)    
                        setTimeout(function() {// 延時觸發獲取月份對象，因為上面的事件觸發和對象生成有時間間隔    
                            tds = p.find('div.calendar-menu-month-inner td');    
                            tds.click(function(e) {    
                                e.stopPropagation(); // 禁止冒泡執行easyui給月份綁定的事件    
                                var year = /\d{4}/.exec(span.html())[0]// 得到年份    
                                , month = parseInt($(this).attr('abbr'), 10) + 1; // 月份    
                                $('#datetime1').datebox('hidePanel')// 隱藏日期對象    
                                .datebox('setValue', year + '-' + month); // 設置日期的值    
                            });    
                        }, 0);    
                },    
                parser : function(s) {// 配置parser，返回選擇的日期    
                    if (!s)    
                        return new Date();    
                    var arr = s.split('-');    
                    return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1);    
                },    
                formatter : function(d) {    
                    var month = d.getMonth();  
                    if(month<=10){  
                        month = "0"+month;  
                    }  
                    if (d.getMonth() == 0) {    
                        return d.getFullYear()-1 + '-' + 12;    
                    } else {    
                        return d.getFullYear() + '-' + month;    
                    }    
                }// 配置formatter，只返回年月    
            });    
            var p = $('#datetime1').datebox('panel'), // 日期選擇對象    
            tds = false, // 日期選擇對象中月份    
            span = p.find('span.calendar-text'); // 顯示月份層的觸發控件    
            
    });    

最后的效果如下圖：