擴展Ext的DateFIeld,實現月、周、天的輸入

擴展Ext的DateFIeld。根據搜索到的資料。自己加了寫內容。可以實現月、周、天的輸入。當爲月時,只能選擇月和年,天默認爲每月的第一天。當選擇周粒度時,只能選擇週一。當選擇天時,和Ext的DateFIeld相同。返回的字符串格式都是‘Y-m-d H:i:s’格式。


/**

    var startDateField = new Ext.form.DateField({
format:'Y-m-d H:i:s',
formattype:'H',//H 表示小時;D表示天;W表示周;M表示月
fieldLabel:'時間',
id:'startDate',
name:'startDate',
width:130,
anchor:'90%',
plugins: 'monthPickerPlugin', 
value:startDate
});  **/
Ext.ux.MonthPickerPlugin = function() {   
    var picker;   
    var oldDateDefaults;   
  
    this.init = function(pk) {   
        picker = pk;   
        picker.onTriggerClick = picker.onTriggerClick.createSequence(onClick);   
        picker.getValue = picker.getValue.createInterceptor(setDefaultMonthDay).createSequence(restoreDefaultMonthDay);   
        picker.beforeBlur = picker.beforeBlur.createInterceptor(setDefaultMonthDay).createSequence(restoreDefaultMonthDay);   
    //picker.mon(picker, 'blur', lostblur, picker);  
        picker.dateFieldisValid =dateFieldisValid;
        picker.mon(picker, 'blur', picker.dateFieldisValid, picker);
  Ext.apply(pk, {
       getStrValue:function (){  
        var dt = new Date(); 
           dt= this.getValue();
           return dt.format('Y-m-d H:i:s');
       }  
   });  
if(picker.formattype=='W'){
picker.setDisabledDays([0,2,3,4,5,6]);
}else{
picker.setDisabledDays([]);
}
    };   
    function setDefaultMonthDay() {   
        oldDateDefaults = Date.defaults.d;   
        Date.defaults.d = 1;   
        return true;   
    }   
  
    function restoreDefaultMonthDay(ret) {   
        Date.defaults.d = oldDateDefaults;   
        return ret;   
    }   
  
    function onClick(e, el, opt) {   
        var p = picker.menu.picker;   




        if(this.formattype=='M'){
            p.activeDate = p.activeDate.getFirstDateOfMonth();   
       if (p.value) {   
           p.value = p.value.getFirstDateOfMonth();   
       }   
        p.showMonthPicker();   
           
       if (!p.disabled) {   
           p.monthPicker.stopFx();   
           p.monthPicker.show();   
           p.mun(p.monthPicker, 'click', p.onMonthClick, p);   
           p.mun(p.monthPicker, 'click', p.onMonthDblClick, p);   
           p.onMonthClick = p.onMonthClick.createSequence(pickerClick,this);   
           p.onMonthDblClick = p.onMonthDblClick.createSequence(pickerDblclick,this);   
           p.mon(p.monthPicker, 'click', p.onMonthClick, p);   
           p.mon(p.monthPicker, 'click', p.onMonthDblClick, p);   
       }   
        }
    }   
  
    function pickerClick(e, t) {   
        var el = new Ext.Element(t);   
        if (el.is('button.x-date-mp-cancel')) {   
            picker.menu.hide();   
        } else if(el.is('button.x-date-mp-ok')) {   
            var p = picker.menu.picker;   
            if(p.disabledDays!=null && p.disabledDays.length>0){
            var dt=new Date();
            dt=p.activeDate;
            var day1=p.activeDate.getFirstDayOfMonth();
            dt.setDate(dt.getDate()+(day1==0?1:(day1==1?0:(7-day1+1))));
            p.setValue(dt);  
            }else{
                p.setValue(p.activeDate);  
            }
            p.fireEvent('select', p, p.value);   
        }   
    }   
  
    function pickerDblclick(e, t) {   
        var el = new Ext.Element(t);   
        if (el.parent()   
            && (el.parent().is('td.x-date-mp-month')   
            || el.parent().is('td.x-date-mp-year'))) {   
  
            var p = picker.menu.picker;   
            if(this.formattype=='M'){
            p.setValue(p.activeDate);   
            p.fireEvent('select', p, p.value);  
            }
        }   
    }
    
    //--此函數可以寫一些驗證信息
    function dateFieldisValid(e,t){

return true;
}
};   
  
Ext.preg('monthPickerPlugin', Ext.ux.MonthPickerPlugin);  
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章