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


Posted in Javascript onJune 24, 2014

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中运行

Javascript 相关文章推荐
extjs之去除s.gif的影响
Dec 25 Javascript
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
vue实现计步器功能
Nov 01 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 Javascript
搭建pomelo 开发环境
Jun 24 #Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 #Javascript
Node.js中require的工作原理浅析
Jun 24 #Javascript
angularjs实现与服务器交互分享
Jun 24 #Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 #Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 #Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 #Javascript
You might like
PHP分页显示制作详细讲解
2006/12/05 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python的多重继承的理解
2017/08/06 Python
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
Python探索之创建二叉树
2017/10/25 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
Django model update的多种用法介绍
2020/03/28 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
Python安装OpenCV的示例代码
2020/03/05 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
Python3.9新特性详解
2020/10/10 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
仓库管理计划书
2014/05/04 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
python+opencv实现视频抽帧示例代码
2021/06/11 Python