需求

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-限制日期選擇

初始化後預設是選擇一個星期的範圍：