My97DatePicker选择两个日期范围不超过30天的demo

Posted 2020-10-16

需求

ExtJs下使用My97DatePicker对时间范围不超过30天进行选择。

关键点

1. 使用全局变量。
2. 对选择完的第一个日期进行逻辑判断。（我的逻辑能力还有待加强啊）
3. 因为当选择了第一个框范围在超过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-限制日期选择

初始化后默认是选择一个星期的范围：