Posted on 2012-12-16 22:31
小胡子 閱讀(619)
評論(0) 編輯 收藏 所屬分類:
Ext
項目中有時需要用到起始日期和結束日期，要做到起始日期必須小于結束日期。在extjs中已經有現成的函數，摘錄如下：
1 Ext.apply(Ext.form.VTypes, {
2 daterange : function(val, field) {
3 var date = field.parseDate(val);
4 if (!date) {
5 return;
6 }
7 if (field.startDateField
8 && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax
9 .getTime()))) {
10 var start = Ext.getCmp(field.startDateField);
11 start.setMaxValue(date);
12 start.validate();
13 this.dateRangeMax = date;
14 } else if (field.endDateField
15 && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin
16 .getTime()))) {
17 var end = Ext.getCmp(field.endDateField);
18 end.setMinValue(date);
19 end.validate();
20 this.dateRangeMin = date;
21 }
22 /*
23 * Always return true since we're only using this vtype to set
24 * the min/max allowed values (these are tested for after the
25 * vtype test)
26 */
27 return true;
28 }
29 });
然后分別定義起始日期和結束日期控件：
1 var startDate = new Ext.form.DateField({
2 fieldLabel : '開始日期',
3 emptyText : '請選擇',
4 disabledDays : [1, 2, 5],//將星期一,二,五禁止.數值為0-6,0為星期日,6為星期六
5 labelWidth : 100,
6 readOnly : true,
7 allowBlank : false,
8 format : 'Y-m-d',//日期格式
9 name : 'startdt',
10 id : 'startdt',
11 vtype : 'daterange',//daterange類型為上代碼定義的類型
12 endDateField : 'endDate'//必須跟endDate的id名相同
13 })
14 var endDate = new Ext.form.DateField({
15 fieldLabel : '結束日期',
16 emptyText : '請選擇',
17 disabledDays : [1, 2, 5],//將星期一,二,五禁止.數值為0-6,0為星期日,6為星期六
18 readOnly : true,
19 allowBlank : false,
20 format : 'Y-m-d',//日期格式
21 name : 'enddt',
22 id : 'endDate',
23 vtype : 'daterange',//daterange類型為上代碼定義的類型
24 startDateField : 'startdt'//必須跟startDate的id名相同
25 })
效果如下兩圖：
圖1.選擇開始日期
圖2.選擇結束日期
原文出自：
http://blog.csdn.net/security08/article/details/5070749