?
学习还可以参考:
http://blog.csdn.net/lulu_jiang/article/details/5473277
本文转自:http://blog.csdn.net/security08/article/details/5070749
?
项目中有时需要用到起始日期和结束日期,要做到起始日期必须小于结束日期。在extjs中已经有现成的函数,摘录如下:
?
?
?
- Ext.apply(Ext.form.VTypes,?{??
- ????????????daterange?:?function(val,?field)?{??
- ????????????????var?date?=?field.parseDate(val);??
- ????????????????if?(!date)?{??
- ????????????????????return;??
- ????????????????}??
- ????????????????if?(field.startDateField??
- ????????????????????????&&?(!this.dateRangeMax?||?(date.getTime()?!=?this.dateRangeMax??
- ????????????????????????????????.getTime())))?{??
- ????????????????????var?start?=?Ext.getCmp(field.startDateField);??
- ????????????????????start.setMaxValue(date);??
- ????????????????????start.validate();??
- ????????????????????this.dateRangeMax?=?date;??
- ????????????????}?else?if?(field.endDateField??
- ????????????????????????&&?(!this.dateRangeMin?||?(date.getTime()?!=?this.dateRangeMin??
- ????????????????????????????????.getTime())))?{??
- ????????????????????var?end?=?Ext.getCmp(field.endDateField);??
- ????????????????????end.setMinValue(date);??
- ????????????????????end.validate();??
- ????????????????????this.dateRangeMin?=?date;??
- ????????????????}??
- ????????????????/*?
- ?????????????????*?Always?return?true?since?we're?only?using?this?vtype?to?set?
- ?????????????????*?the?min/max?allowed?values?(these?are?tested?for?after?the?
- ?????????????????*?vtype?test)?
- ?????????????????*/??
- ????????????????return?true;??
- ????????????}??
- ????????});??
?
?
然后分别定义起始日期和结束日期控件:
?
?
- var?startDate?=?new?Ext.form.DateField({??
- ????????????????fieldLabel?:?'开始日期',??
- ????????????????emptyText?:?'请选择',??
- ????????????????disabledDays?:?[1,?2,?5],//将星期一,二,五禁止.数值为0-6,0为星期日,6为星期六??
- ????????????????labelWidth?:?100,??
- ????????????????readOnly?:?true,??
- ????????????????allowBlank?:?false,??
- ????????????????format?:?'Y-m-d',//日期格式??
- ????????????????name?:?'startdt',??
- ????????????????id?:?'startdt',??
- ????????????????vtype?:?'daterange',//daterange类型为上代码定义的类型??
- ????????????????endDateField?:?'endDate'//必须跟endDate的id名相同??
- ????????????})??
- ????var?endDate?=?new?Ext.form.DateField({??
- ????????????????fieldLabel?:?'结束日期',??
- ????????????????emptyText?:?'请选择',??
- ????????????????disabledDays?:?[1,?2,?5],//将星期一,二,五禁止.数值为0-6,0为星期日,6为星期六??
- ????????????????readOnly?:?true,??
- ????????????????allowBlank?:?false,??
- ????????????????format?:?'Y-m-d',//日期格式??
- ????????????????name?:?'enddt',??
- ????????????????id?:?'endDate',??
- ????????????????vtype?:?'daterange',//daterange类型为上代码定义的类型??
- ????????????????startDateField?:?'startdt'//必须跟startDate的id名相同??
- ????????????})??
?
?
效果如下两图:
?
?
?????????????????????????????? 图1.选择开始日期
?
?
?
????????????????????????????????? 图2.选择结束日期