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 parseInt 大改造
Sep 27 Javascript
js控制表单操作的常用代码小结
Aug 15 Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
对javascript继承的理解
Oct 11 Javascript
详解webpack分包及异步加载套路
Jun 29 Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
js核心基础之构造函数constructor用法实例分析
May 11 Javascript
node.js实现带进度条的多文件上传
Mar 27 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 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 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
常见的PHP五种设计模式小结
2011/03/23 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
python学习基础之循环import及import过程
2018/04/22 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
python的range和linspace使用详解
2019/11/27 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
传播学毕业生求职信
2013/10/11 职场文书
口腔医学技术应届生求职信
2013/11/09 职场文书
大课间活动实施方案
2014/03/06 职场文书
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫