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

赞 (0)

相关推荐

  • js判断选择时间不能小于当前时间的示例代码

    复制代码 代码如下: var controldate; function checkDate(){ controldate= document.getElementById("sendDate").value; if(controldate==""){ alert('日期不能为空'); return false; }else{ var day = new Date(); var Year = 0; var Month = 0; var Day = 0; var Cu

  • JS判断时间段的实现代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <th>交易时间开始:</th> <td><input id="bcconDateBeginDate" name="bcconDateBeginDate" value="2016/06/12 00:00:00" class="easyui-datetimebox" editable="false" style=&

  • js 判断所选时间(或者当前时间)是否在某一时间段的实现代码

    js 判断所选时间(或者当前时间)是否在某一时间段的实现代码

    核心代码: var time_range = function (beginTime, endTime, nowTime) { var strb = beginTime.split (":"); if (strb.length != 2) { return false; } var stre = endTime.split (":"); if (stre.length != 2) { return false; } var strn = nowTime.split

  • JS判断两个时间大小的示例代码

    如下所示: 复制代码 代码如下: function validTime(startTime,endTime){       var arr1 = startTime.split("-");       var arr2 = endTime.split("-");       var date1=new Date(parseInt(arr1[0]),parseInt(arr1[1])-1,parseInt(arr1[2]),0,0,0);        var dat

  • 判断Session的过期时间 采用JavaScript实时显示剩余多少秒

    <%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> <%session.timeout=1440 '单位(分钟)1440=24小时 参数不能大于24小时 也就是不能大于1440分钟%> <% if session("login")<>"888888" then'判断Session是否有效 Response.Write("Session过期了&quo

  • js判断选择的时间是否大于今天的代码

    复制代码 代码如下: <script>$("#pseudo_review_time'+goods_id+'").datepicker({dateFormat: "yy-mm-dd"});$("#pseudo_review_time'+goods_id+'").change(function(){var thetime=$(this).val();var d=new Date(Date.parse(thetime.replace(/-/

  • js判断日期时间有效性的方法

    分享两种使用javascript验证日期以及时间是否有效的方法 第一种: //| 日期有效性验证 //| 格式为:YYYY-MM-DD或YYYY/MM/DD function IsValidDate(DateStr){ var sDate=DateStr.replace(/(^\s+|\s+$)/g,'');//去两边空格; if(sDate==''){ return true; } //如果格式满足YYYY-(/)MM-(/)DD或YYYY-(/)M-(/)DD或YYYY-(/)M-(/)D或

  • extjs 时间范围选择自动判断的实现代码

    extjs 时间范围选择自动判断的实现代码

    extjs中 有时需要选择一个日期范围,需要自动判断,选择的开始日期不能大于结束日期,或结束日期不能小于开始日期,实现的代码如下 效果图: 从上图可以看到,当选择了一个开始时间后,会自动限制结束时间的选择范围,实现两个日期选择器的联动. 代码如下: 首先定义联动处理函数: Ext.apply(Ext.form.field.VTypes, { daterange: function (val, field) { var date = field.parseDate(val); if (!date)

  • asp(JavaScript)自动判断网页编码并转换的代码

    完整的示例代码如下: 复制代码 代码如下: <%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>JavaScript自动判断网页编码并转换</titl

  • jquery实现可自动判断位置的弹出层效果代码

    jquery实现可自动判断位置的弹出层效果代码

    本文实例讲述了jquery实现可自动判断位置的弹出层效果代码.分享给大家供大家参考.具体如下: 这是一款jquery实现的智能弹出层效果,位置可以自适应,当层靠右边显示时自动往左移.初次运行时请按F5刷新,载入远程jQuery后才能看到效果,点击鼠标左键,弹出层将出现,在最右边点击时层自动往左移. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-auto-check-pos-alert-dlg-demo/ 具体代码如下: <!DOC

  • 日期时间范围选择插件:daterangepicker使用总结(必看篇)

    日期时间范围选择插件:daterangepicker使用总结(必看篇)

    分享说明: 项目中要使用日期时间范围选择对数据进行筛选:精确到年月日 时分秒:起初,使用了layui的时间日期选择插件:但是在IIE8第一次点击会报设置格式错误:研究了很久没解决,但能确定不是layui的问题:因为自己写的demo可以在IE8运行:只是在我的项目环境下某些代码冲突了:所以换用了bootstrap插件daterangepicker:看了很多资料;结合官网了文档:基本算是搞定了:把我的总结代码分享给大家:希望对使用daterangepicker插件的初学者有帮助. 总结分为四个部分:

  • Python实现手机号自动判断男女性别(实例解析)

    Python实现手机号自动判断男女性别(实例解析)

    本文性别判断主要依靠airtest中的自动化测试实现 通过自动对比支付宝页面男女图像,从而实现男女判断 代码如下: 男女判断函数: // An highlighted block def numbe(): if exists(Template(r"tpl1574867500094.png", threshold=0.85, rgb=True, target_pos=0, record_pos=(0.779, 0.382), resolution=(960, 540))): sex =

  • Antd下拉选择,自动匹配功能的实现

    我就废话不多说了,大家还是直接看代码吧~ <Select placeholder="客户名称" showSearch optionFilterProp="children"//自动匹配输入 onChange={this.selectChange} > {this.state.selectCustomer} </Select> 补充知识:antd select如何支持既能输入不存在的选项又能进行下拉框选择 1.Select必须具备onSearc

  • 用python-webdriver实现自动填表的示例代码

    在日常工作中常常需要重复填写某些表单,如果人工完成,费时费力,而且网络延迟令人十分崩溃.如果能够用程序实现自动填表,效率可以提高一倍以上,并且能够移植到多台计算机,进一步提高工作效率.webdriver是python的selenium库中的一个自动化测试工具,它能完全模拟浏览器的操作,无需处理复杂的request.post,对爬虫初学者十分友好. 一.环境配置 python3.6+selenium库+xlrd库+xlwt库 其中xlrd和xlwt库用于读写excel表中的数据. 还要下载一个浏览

  • ajax代理程序,自动判断字符编码

    由于ajax在跨域的访问上有问题,目前最好的方法是做代理.写了个代理程序和心得 为了做ajax的代理,研究了下服务器端的xmlhttp并和客户端的ajax中的xmlhttp做了个比较,后台代码是asp的 服务器端的xmlhttp也就是asp小偷程序,我把代码改成了javascript. 1.在服务器端的xmlhttp.Open("GET",url,false)异步必须是关闭的,而客户端的异步是打开的,这个很好理解. 2.在服务器端的xmlhttp.Responsebody 这里用的是R

  • vue router自动判断左右翻页转场动画效果

    前段时间做了一个移动端spa项目,技术基于 :vue + vue-router + vuex + mint-ui 因为使用了vue-cli脚手架的webpack模版,所有页面都以.vue为后缀的文件作为一个组件 最近公司项目比较少终于有空来记录一下自己对vue-router的一些小小的使用心得, 一般的移动端口单页应用在跳转页面时候会有相应的转场动画,比如: 1. 从当前一级页面跳转二级页面需要展示的转场动画是一级页面向屏幕左边移动消失的同时, 二级页面从屏幕的右边向左边移动出现.(类似翻书翻到

  • ASP强制刷新网页和判断文件地址实例代码

    强制刷新网页 <% '强制性刷新随机验证码 '让随机验证码每次按IE的后退按钮时,返回登录页面的随即码都自动刷新, Response.expires=-1 Response.AddHeader"pragma","no-cache" Response.AddHeader"cache-control","no-store" %> 判断文件地址是否有效 <% Response.Write("")

随机推荐