extjs 时间范围选择自动判断的实现代码

 更新时间:2014年06月24日 17:35:36   投稿:whsnow  
这篇文章主要介绍了extjs 时间范围选择自动判断的实现代码,需要的朋友可以参考下

extjs中 有时需要选择一个日期范围,需要自动判断,选择的开始日期不能大于结束日期,或结束日期不能小于开始日期,实现的代码如下

效果图:

从上图可以看到,当选择了一个开始时间后,会自动限制结束时间的选择范围,实现两个日期选择器的联动.

代码如下:

首先定义联动处理函数:

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: '开始日期必须小于结束日期' 
}); 
Ext.tip.QuickTipManager.init();

在tbar,bbar或form中的items中增加:

{ 
xtype: 'datefield', 
fieldLabel: '时间范围 开始', 
name: 'startdt', 
id: 'startdt', 
vtype: 'daterange', 
endDateField: 'enddt', 
format: 'Y-m-d', 
width: 220, 
labelWidth: 90, 
msgTarget: 'side', 
autoFitErrors: false 
}, { 
xtype: 'datefield', 
fieldLabel: '结束', 
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 () { ...

即可实现以上效果 本代码复制在extjs4.1.1中运行

相关文章

  • ExtJS[Desktop]实现图标换行示例代码

    ExtJS[Desktop]实现图标换行示例代码

    ExtJS中的desktop的demo中,默认的图标排列是不换行的,以下代码就是为了解决这一问题的,需要的朋友可以了解下
    2013-11-11
  • Extjs TimeField 显示正常时间格式的代码

    Extjs TimeField 显示正常时间格式的代码

    由后台返回的json的日期时间格式中,往往都是 类似 "\/Date(1309200300000)\/"的日期时间格式,结果导致无法正常在TimeField中显示
    2011-06-06
  • Extjs让combobox写起来简洁又漂亮

    Extjs让combobox写起来简洁又漂亮

    代码看起来简洁又漂亮是如何做到的,这篇文章主要为大家详细介绍了Extjs如何让combobox写起来更简单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • Extjs根据条件设置表格某行背景色示例

    Extjs根据条件设置表格某行背景色示例

    这篇文章主要介绍了Extjs如何根据条件设置表格某行背景色,需要的朋友可以参考下
    2014-07-07
  • ext 同步和异步示例代码

    ext 同步和异步示例代码

    异步调用不用做过多说明,ext的api中支持的很多。
    2009-09-09
  • EXT中xtype的含义分析

    EXT中xtype的含义分析

    根据我在论坛上的观察,xtype用起来的时候疑惑会比较多。甚至有些人根本忽略xtype,或者不清楚它是什么。所以我决定阐述一下这个xtype的概念。
    2010-01-01
  • ext前台接收action传过来的json数据示例

    ext前台接收action传过来的json数据示例

    这篇文章以示例的方式为大家介绍了ext前台接收action传过来的json数据,需要的朋友可以参考下
    2014-06-06
  • extjs 学习笔记(一) 一些基础知识

    extjs 学习笔记(一) 一些基础知识

    相信很多人对使用js进行客户端的编程比较头大,其实现在已经有了很多优秀的js库,可以大大简化js编程的工作量,其中,jquery和extjs就是两款非常优秀的js库。
    2009-10-10
  • extjs两个tbar问题探讨

    extjs两个tbar问题探讨

    知道每个panel都有一个tbar(top bar 上面工具栏) ,bbar(bottom bar 底部工具栏)下面为大家介绍下extjs的两个tbar问题,感兴趣的朋友可以参考下
    2013-08-08
  • extjs form textfield的隐藏方法

    extjs form textfield的隐藏方法

    只需将textfield的hidden和hideLabel配置为true就可以了。只设置hidden:true时会显示出来一个:的标签。
    2008-12-12

最新评论