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

需求：前臺頁面使用了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的日期時間控制元件的顯示方式，導致所有頁面的格式都會按照重寫後的格式來顯示；
第二種是將需要重寫格式的控制元件引用對應的樣式，不會對其它頁面相同的控制元件產生影響；