当前位置: 代码迷 >> Web前端 >> Ext.form.DateField简略用法及日期范围控制
  详细解决方案

Ext.form.DateField简略用法及日期范围控制

热度:533   发布时间:2012-08-19 21:09:48.0
Ext.form.DateField简单用法及日期范围控制

?

学习还可以参考:

http://blog.csdn.net/lulu_jiang/article/details/5473277

本文转自:http://blog.csdn.net/security08/article/details/5070749

?

项目中有时需要用到起始日期和结束日期,要做到起始日期必须小于结束日期。在extjs中已经有现成的函数,摘录如下:

?

?

?

[javascript]?view plaincopy
  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. ????????});??

?

?

然后分别定义起始日期和结束日期控件:

?

?

[javascript]?view plaincopy
  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

?

?????????????????????????????? 图1.选择开始日期

?

?

2

?

????????????????????????????????? 图2.选择结束日期

  相关解决方案