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 相关文章推荐
JavaScript 给汉字排序实例代码
Jun 28 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
JS实现可视化文件上传
Sep 08 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
js的Object.assign用法示例分析
Mar 05 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进行MySQL删除记录操作代码
2008/06/07 PHP
ThinkPHP php 框架学习笔记
2009/10/30 PHP
phpmail类发送邮件函数代码
2012/02/20 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
Node.js的进程管理的深入理解
2019/01/09 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
把pandas转换int型为str型的方法
2019/01/29 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
appium+python adb常用命令分享
2020/03/06 Python
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
vue实现倒计时功能
2021/03/24 Vue.js
财务副总经理工作职责
2013/11/25 职场文书
最新的咖啡店创业计划书
2013/12/30 职场文书
党员干部廉政承诺书
2015/04/28 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
使用feign服务调用添加Header参数
2021/06/23 Java/Android
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript