extjs 时间范围选择的实现
来源:互联网 发布:淘宝修改销量 编辑:程序博客网 时间:2024/05/02 09:46
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中运行
3 0
- extjs 时间范围选择的实现
- Extjs mydate97时间选择控件的使用
- EXTJS自定义验证日期选择范围
- 自定义时间选择器的分钟为自定义的选择范围
- jquery实现的时间范围赋值控件
- Flex - 用于选择时间范围的组件
- ExtJs日期控件案例(可控制时间的选择)
- jsmy97时间控件,时间范围选择
- layui时间控件选择时间范围
- 使用WdatePicker时间插件简单的控制页面上两个时间选择的前后范围
- asp 时间的比较如何选择出适合范围的时间
- 使用WdatePicker时间插件简单的控制页面上两个时间选择的前后范围
- Flex 实现日期范围的选择并格式化
- WdatePicker插件来实现开始和结束时间选择范围控制
- 使用Bootstrap编写时间范围选择控件
- extjs实现年月格式的日期选择(DatePicker)
- 测试管理011:测试策略的选择 - 时间、范围、成本与质量的平衡
- Extjs实现年月日时分秒格式的时间选择器
- 数据操作的封装--sqlhelper
- Java内部类的使用小结
- 导航控制器(二 自定义UINaigationControl)
- 关于Discuz!UC中数据通信问题
- 使用axis的stub生成webservice客户端代码
- extjs 时间范围选择的实现
- 用友优普总裁:移动互联带来两个层面的变化
- 程序员一定要了解哪十大算法
- ADF 选择当前树节点
- 面向对象编程的弊端是什么?
- Linux内核编译
- 為什麼我的手機不支援 BLE
- 从jsp 接收另外一个jsp的参数并且把这个参数赋值给js 文件;
- php 二维数组排序比较 1 —— 冒泡排序法