自定義EasyUI的datetimebox控制元件日期時間的顯示格式
阿新 • • 發佈:2019-01-25
工作中遇到的問題,在此記錄一下。
需求:前臺頁面使用了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的日期時間控制元件的顯示方式,導致所有頁面的格式都會按照重寫後的格式來顯示;
第二種是將需要重寫格式的控制元件引用對應的樣式,不會對其它頁面相同的控制元件產生影響;