extjs 時(shí)間范圍選擇自動(dòng)判斷的實(shí)現(xiàn)代碼
extjs中 有時(shí)需要選擇一個(gè)日期范圍,需要自動(dòng)判斷,選擇的開始日期不能大于結(jié)束日期,或結(jié)束日期不能小于開始日期,實(shí)現(xiàn)的代碼如下
效果圖:

從上圖可以看到,當(dāng)選擇了一個(gè)開始時(shí)間后,會(huì)自動(dòng)限制結(jié)束時(shí)間的選擇范圍,實(shí)現(xiàn)兩個(gè)日期選擇器的聯(lián)動(dòng).
代碼如下:
首先定義聯(lián)動(dòng)處理函數(shù):
Ext.apply(Ext.form.field.VTypes, {
daterange: function (val, field) {
var date = field.parseDate(val);
if (!date) {
return false;
}
if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
var start = field.up('grid').down('#' + field.startDateField);
start.setMaxValue(date);
start.validate();
this.dateRangeMax = date;
}
else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
var end = field.up('grid').down('#' + field.endDateField);
end.setMinValue(date);
end.validate();
this.dateRangeMin = date;
}
return true;
},
daterangeText: '開始日期必須小于結(jié)束日期'
});
Ext.tip.QuickTipManager.init();
在tbar,bbar或form中的items中增加:
{
xtype: 'datefield',
fieldLabel: '時(shí)間范圍 開始',
name: 'startdt',
id: 'startdt',
vtype: 'daterange',
endDateField: 'enddt',
format: 'Y-m-d',
width: 220,
labelWidth: 90,
msgTarget: 'side',
autoFitErrors: false
}, {
xtype: 'datefield',
fieldLabel: '結(jié)束',
name: 'enddt',
id: 'enddt',
vtype: 'daterange',
startDateField: 'startdt',
format: 'Y-m-d',
width: 170,
labelWidth: 40,
msgTarget: 'side',
autoFitErrors: false
}, { xtype: 'button',
text: '查詢',
iconCls: 'fljs',
handler: function () { ...
即可實(shí)現(xiàn)以上效果 本代碼復(fù)制在extjs4.1.1中運(yùn)行
相關(guān)文章
ExtJS[Desktop]實(shí)現(xiàn)圖標(biāo)換行示例代碼
ExtJS中的desktop的demo中,默認(rèn)的圖標(biāo)排列是不換行的,以下代碼就是為了解決這一問題的,需要的朋友可以了解下2013-11-11
Extjs TimeField 顯示正常時(shí)間格式的代碼
由后臺(tái)返回的json的日期時(shí)間格式中,往往都是 類似 "\/Date(1309200300000)\/"的日期時(shí)間格式,結(jié)果導(dǎo)致無法正常在TimeField中顯示2011-06-06
ext前臺(tái)接收action傳過來的json數(shù)據(jù)示例
這篇文章以示例的方式為大家介紹了ext前臺(tái)接收action傳過來的json數(shù)據(jù),需要的朋友可以參考下2014-06-06
extjs 學(xué)習(xí)筆記(一) 一些基礎(chǔ)知識(shí)
相信很多人對(duì)使用js進(jìn)行客戶端的編程比較頭大,其實(shí)現(xiàn)在已經(jīng)有了很多優(yōu)秀的js庫,可以大大簡(jiǎn)化js編程的工作量,其中,jquery和extjs就是兩款非常優(yōu)秀的js庫。2009-10-10

