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 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
浅谈javascript的调试
Jan 28 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
Js图片点击切换轮播实现代码
Jul 27 Javascript
AngularJS实现多级下拉框
Mar 25 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
laravel 多图上传及图片的存储例子
2019/10/14 PHP
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
Python3写入文件常用方法实例分析
2015/05/22 Python
python 读取二进制 显示图片案例
2020/04/24 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
英国女性时尚品牌:Apricot
2018/12/04 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
材料成型专业个人求职信范文
2013/09/25 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
中学生班主任评语
2014/01/30 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
元旦联欢会主持词
2014/03/26 职场文书
班主任评语大全
2014/04/26 职场文书
运动会方队口号
2014/06/07 职场文书
应用心理学专业求职信
2014/08/04 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
投资意向协议书
2015/01/29 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
Django rest framework如何自定义用户表
2021/06/09 Python