extjs中 有时须要选择一个日期范围 ,须要自己主动推断,选择的開始日期不能大于结束日期,或结束日期不能小于開始日期,实现的代码例如以下

效果图:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvb0xpbkJTb2Z0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

从上图能够看到,当选择了一个開始时间后,会自己主动限制结束时间的选择范围,实现两个日期选择器的联动.

代码例如以下:

首先定义联动处理函数:

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

extjs 时间范围选择的实现的更多相关文章

  1. 日期时间范围选择插件:daterangepicker使用总结

    分享说明: 项目中要使用日期时间范围选择对数据进行筛选;精确到年月日 时分秒;起初,使用了layui的时间日期选择插件;但是在IIE8第一次点击会报设置格式错误;研究了很久没解决,但能确定不是layu ...

  2. 使用PerfView监测.NET程序性能(四):折叠,过滤和时间范围选择

    在上一篇文章中,我们使用了Perfview的分组功能.分组功能旨在对某些函数按照某个格式进行分组,以减少视图中的各种无关函数的数量.但仅有分组还不够,有时我们想将一些函数调用信息按某些条件过滤掉,例如 ...

  3. 双日历插件--jq datepicker时间范围选择

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. layui-时间选择器-时间范围选择

    HTML: JS: layui.use(['laydate'],function{ }); start:就为你选择的开始日期; end:就为你选择的结束日期 此方式可选择任意范围的时间,时间格式可任意 ...

  5. 开发extjs常用的插件

    Spket是目前支持Ext 2.0最为出色的IDE. 它采用.jsb project file 文件并将继承于基类和所有文档的内容嵌入到生成代码提示的Script doc中.注:不支持配置项的代码提示 ...

  6. eclipse下安装Extjs的插件spket

    最近项目要用ext进行开发,所以这段时间开始学习ext. 我这里用的是ext3.0,eclipse3.5. 每次都要去查API,很烦,所以装个EXT提示的插件对初学者来说有很大的帮助. 假设你已经下载 ...

  7. [extjs(1)]MyEclipse2014安装ext4插件Spket

    1 解压好的Spket目录如下 2  建议以link方式安装Spket到MyEclipse中 找到MyEclipse的安装目录 如 3  在MyEclipse 的根目录新建一个目录extjs 当然也可 ...

  8. ExtJs工具篇(1)——在Aptana3中安装ExtJS 代码提示插件

    首先得下载Aptana 这个软件,我下载的是Aptana3这个版本.下载后,在"帮助"菜单中选择"安装新软件",弹出下面的对话框: 我们需要安装一个叫做&quo ...

  9. 如何在sharepoint2010中配置Google Anlytics 分析服务

      简介 Google Analytics(分析)不仅可以帮助您衡量销售与转化情况,而且能为您提供新鲜的深入信息,帮助您了解访问者如何使用您的网站,他们如何到达您的网站,以及您可以如何吸引他们不断回访 ...

随机推荐

  1. sqlite学习笔记7:C语言中使用sqlite之打开数据库

    数据库的基本内容前面都已经说得差点儿相同了.接下看看如何在C语言中使用sqlite. 一 接口 sqlite3_open(const char *filename, sqlite3 **ppDb) 打 ...

  2. hive 配置注意事项及初始化hive 元数据

    今天配置hive 犯了一个问题:下载的hive tar.gz 里的conf文件夹仅仅有一个 hive-default.xml.template,于是我就cp  了一份命名为:hive-default. ...

  3. jquery源码ajax分析

    http://www.cnblogs.com/aaronjs/p/3683925.html

  4. 基于servlet实现一个web框架

    servlet作为一个web规范.其本身就算做一个web开发框架,可是其web action (响应某个URI的实现)的实现都是基于类的,不是非常方便,而且3.0之前的版本号还必须通过web.xml配 ...

  5. 2015.03.13,外语,读书笔记-《Word Power Made Easy》 10 “如何讨论交谈习惯”学习笔记 SESSION 26

    1.a Spartan virtue 古斯巴达人中一位有名的Laconia国王,其言语比Vermonter(美国佛蒙特州人)还简洁.一个传说,马其顿菲利普国王(亚历山大的老爸)要进攻他们的都城,发了一 ...

  6. CodeForces--609C --Load Balancing(水题)

    Load Balancing Time Limit: 2000MS   Memory Limit: 262144KB   64bit IO Format: %I64d & %I64u Subm ...

  7. WebBrowser网页操作之提取获取元素和标签(完整篇)

    最近使用WebBrower做了几个Hook小程序,收集积累如下: using System; using System.Collections.Generic; using System.Linq; ...

  8. Android设计模式—— 观察者模式(以及EventBus的简单使用)

    1.概述 观察者模式最常用的地方是GUI系统.订阅-发布系统.观察者模式的一个重要作用就是解耦,将观察者和被观察者解耦,使得他们之间的依赖性更小. 2.定义 定义对象间的一种一对多依赖关系,使得每当一 ...

  9. WebView简单用法

    1.空布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:andr ...

  10. [ OS ][ Linux ] [ SA ] root 帳號名稱修改

    1. 背景: 由於 Linux 中預設最高權限的使用者一律為 root, 存在安全性的疑慮. 所以比較安全的作法要將 root 帳號改名為其他名稱,讓要入侵的人需要同時破解出帳號和密碼才可以進入主機, ...