自定義EasyUI的datetimebox控件日期時間的顯示格式（轉）

工作中遇到的問題，在此記錄一下。

需求：前台頁面使用了EasyUI框架，在某一個html頁面中要求datetimebox顯示格式為年月日和小時，如圖所示：

嘗試過兩種方法，分別如下：
第一種方法：
datetimebox 依賴 datebox和timespinner兩個組件，擁有datebox的formatter格式化日期和時間顯示方式的屬性;

重寫了formatter屬性,來改變日期框的顯示方式

$.fn.datetimebox.defaults.formatter = function(date){
            //顯示格式: 2017-05-08 17(只顯示年月日和小時)
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var hour = date.getHours();
            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;
            hour = hour < 10 ? '0' + hour : hour;
            return year + "-" + month + "-" + day + " " + hour;
        }
   
   
   
           
   
   
   
           

    
    
    
            
   
   
   
           
   
   
   
           

重寫之后，效果可以正常顯示出來，前后台交互也沒有問題，但是它把當前系統其它頁面中的datetimebox的顯示方式全部改掉了。這肯定是不行的了。

第二種方法：

給easyui的datetimebox控件添加formatter和parser兩個屬性，並定義對應的函數方法；

<input name="startTime" id="startTime${rand}" data-options="formatter:formatter,parser:parser" class="easyui-datetimebox" />
   
   
   
           
   
   
   
           

    
    
    
            
   
   
   
           
   
   
   
           

        //修改日歷框的顯示格式
        function formatter(date){
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var hour = date.getHours();
            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;
            hour = hour < 10 ? '0' + hour : hour;
            return year + "-" + month + "-" + day + " " + hour;
        }

        function parser(s){
            var t = Date.parse(s);
            if (!isNaN(t)){
                return new Date(t);
            } else {
                return new Date(s + ":00:00");
            }
        }
   
   
   
           
   
   
   
           

    
    
    
            
   
   
   
           
   
   
   
           

其它頁面：

此時頁面時間格式正常顯示，且不會對其它頁面產生影響；
但是出現了兼容性的問題，在Chrome中正常，在Firefox中顯示如下：

通過調試，最終發現是formatter函數中return語句中拼接字符串時，小時前面有多個空格導致的，只保留一個空格就可以正常顯示；

客戶需求是小時與日期間隔不能太近，因為容易理解錯誤，要求離遠點；

於是在parser函數中使用s = s.replace(/\s+/,' ')對參數進行處理即要。
完善后的parser函數代碼如下：

        function parser(s){
            s = s.replace(/\s+/,' ');//解決格式字符串中多個空格拼接在Firefox中無法兼容的問題
            var t = Date.parse(s);
            if (!isNaN(t)){
                return new Date(t);
            } else {
                return new Date(s + ":00:00");
            }
        }
   
   
   
           
   
   
   
           

    
    
    
            
   
   
   
           
   
   
   
           

現在有多個空格將日期與小時隔離開，在Firefox中也可以正常顯示了。效果如下圖：

---

總結：

第一種重寫formatter方法后，它直接重寫了easyui的日期時間控件的顯示方式，導致所有頁面的格式都會按照重寫后的格式來顯示；
第二種是將需要重寫格式的控件引用對應的樣式，不會對其它頁面相同的控件產生影響；

轉自:http://blog.csdn.net/qgfjeahn/article/details/71428056