My97DatePicker选择两个日期范围不超过30天的demo
2024-08-21 02:16:37
需求
ExtJs下使用My97DatePicker对时间范围不超过30天进行选择。
关键点
- 使用全局变量。
- 对选择完的第一个日期进行逻辑判断。（我的逻辑能力还有待加强啊）
- 因为当选择了第一个框范围在超过30天的地方，而因为第二个框已经有默认值是今天了，如果用户不碰第二个框就查询会出现超过一个月的问题。于是在选完第一个框就强制弹出第二个框。（我是不是偷懒了- . -？）
代码例子
//全局变量
var min_date = Gsui.Date.format(new Date(new Date().getTime()- 7*24*60*60*1000),'Y-m-d H:i:s');
var max_date = Gsui.Date.format(new Date(new Date().getTime()),'Y-m-d H:i:s');
items : [
{
xtype : 'tbtext',
text : '搜索时间:'
}, {
xtype : 'textfield',
inputId : 'start-date-inputEl',
name : 'filter_begin_time',
id : 'filter_begin_time',
itemId:'filter_begin_time',
value : Gsui.Date.format(new Date(new Date().getTime() - 7*24*60*60*1000),'Y-m-d H:i:s'),
listeners : {
render : function(p) {
p.getEl().on('click', function() {
var filter_end_time = $dp.$('filter_end_time');
WdatePicker({
el : 'start-date-inputEl',
dateFmt : 'yyyy-MM-dd HH:mm:ss',
maxDate : '%y-%M-%d',
onpicked : function(){
filter_end_time.click();
},
onpicking : function(dp){
min_date = dp.cal.getNewDateStr();
var start = min_date;
if(start != "" && start != null){
var endMaxDate = new Date(start);
var aa = endMaxDate.getDate();
endMaxDate.setDate(endMaxDate.getDate()+29);
var today = new Date();
today.setHours(0);
today.setMinutes(0);
today.setSeconds(0);
today.setMilliseconds(0);
//如果30天的范围时间endMaxDate 大于 今天
if(endMaxDate.getTime()>today.getTime()){
// 设置结束时间的最大可取值为今天
min_date = start;
max_date = Gsui.Date.format(new Date(),'Y-m-d H:i:s');
}else{
// 设置结束时间的最大可取值为endMaxDate
min_date = start;
max_date = Gsui.Date.format(new Date(endMaxDate.getTime()),'Y-m-d H:i:s');
}
}
// 如果清空了开始时间,重设结束时间的范围,到今天为止
else{
// 设置结束时间的最大可取值为today
min_date = start;
max_date = Gsui.Date.format(new Date(),'Y-m-d H:i:s');
}
}
});
});
}
}
},{
xtype : 'textfield',
inputId : 'end-date-inputEl',
name : 'filter_end_time',
id : 'filter_end_time',
itemId : 'filter_end_time',
value : Gsui.Date.format(new Date(new Date().getTime()),'Y-m-d H:i:s'),
listeners : {
render : function(p) {
p.getEl().on('click', function() {
WdatePicker({
el : 'end-date-inputEl',
dateFmt : 'yyyy-MM-dd HH:mm:ss',
minDate : min_date,
maxDate : max_date
});
});
}
}
},{
text : '查询',
itemId : 'queryPicBtn'
}
]
参考文章
My97DatePicker两个日期范围不超过30天，第一个小于第二个，都不大于当前日期
WdatePicker-限制日期选择
初始化后默认是选择一个星期的范围：
最新文章
- Microsoft SQL Server 2005 Service fails to start
- Kingsoft Office Writer 2012 8.1.0.3385 - (.wps) Buffer Overflow Exploit (SEH)
- eclipse提交项目到github
- linux 打造man中文帮助手册
- SSH-Struts第二弹：一个Form提交两个Action
- Emacs 之列编辑模式
- chmod() has been disabled for security reasons
- tomcat bug之部署应用的时候经常会发上startup failed due to previous errors
- 最新hosts，更新hosts，可用
- div宽度设置无效问题解决
- 突破路由mac地址过滤思路
- appium windows 命令行中运行以及targetSdkVersionFromManifest failed的解决
- 一个数据表对象(NSManagedObject)加入排序
- 网络资源(9) - TDD视频
- LeetCode OJ 35. Search Insert Position
- 非学习型单层感知机的java实现（日志三）
- <EffectiveJava>读书笔记--01继承的使用注意
- Exif Info 隐私政策
- SQL Server性能优化——等待——SLEEP_BPROOL_FLUSH
- MVC_分页方法调用