下面是在ext官方网站上down的一个函数只显示年和月，不显示日
// in the .html
<span id="curMonthDiv"> </span>
// in the .js
myApp.app = function() {
var monthPicker = null;
return {
init: function() {
monthPicker = new Ext.ux.MonthField({
format: 'M, Y',
useDayDate: 1,
noPastYears: true,
renderTo: 'curMonthDiv',
monthNames: [ /* month names... */ ]
});
// #1: This works, but still turns the text input gray/doesn't look good
monthPicker.el.dom.readOnly = true;
// add listener for when the OK button is clicked (go to new month)
// #2: doesn't work
monthPicker.on("select", function(picker, selDate) {
// go to the new month - contact server...
// When I select the month and hit the OK btn, this code is not reached
});
monthPicker.setValue(new Date()); // today
} // end init()
}; // end return
}(); // end myApp.app
----------------------------------------------
下面是我同事扩展的：
Ext.ux.MonthPicker=Ext.extend(Ext.Component,{
format:"M-y",
okText:Ext.DatePicker.prototype.okText,
cancelText:Ext.DatePicker.prototype.cancelText,
constrainToViewport:true,
monthNames:Date.monthNames,
startDay:0,
value:0,
noPastYears:false,
initComponent:function () {
Ext.ux.MonthPicker.superclass.initComponent.call(this);
this.value=this.value?
this.value.clearTime():new Date().clearTime();
this.addEvents(
'select'
);
if(this.handler) {
this.on("select",this.handler,this.scope||this);
}
},
focus:function () {
if(this.el) {
this.update(this.activeDate);
}
},
onRender:function (container,position) {
var m=['<div style="width: 200px; height:175px;"></div>']
m[m.length]='<div class="x-date-mp"></div>';
var el=document.createElement("div");
el.className="x-date-picker";
el.innerHTML=m.join("");
container.dom.insertBefore(el,position);
this.el=Ext.get(el);
this.monthPicker=this.el.down('div.x-date-mp');
this.monthPicker.enableDisplayMode('block');
this.el.unselectable();
this.showMonthPicker();
if(Ext.isIE) {
this.el.repaint();
}
this.update(this.value);
},
createMonthPicker:function () {
if(!this.monthPicker.dom.firstChild) {
var buf=['<table border="0" cellspacing="0">'];
for(var i=0;i<6;i++) {
buf.push(
'<tr><td class="x-date-mp-month"><a href="#">',this.monthNames[i].substr(0,3),'</a></td>',
'<td class="x-date-mp-month x-date-mp-sep"><a href="#">',this.monthNames[i+6].substr(0,3),'</a></td>',
i==0?
'<td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-prev"></a></td><td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-next"></a></td></tr>':
'<td class="x-date-mp-year"><a href="#"></a></td><td class="x-date-mp-year"><a href="#"></a></td></tr>'
);
}
buf.push(
'<tr class="x-date-mp-btns"><td colspan="4"><button type="button" class="x-date-mp-ok">',
this.okText,
'</button><button type="button" class="x-date-mp-cancel">',
this.cancelText,
'</button></td></tr>',
'</table>'
);
this.monthPicker.update(buf.join(''));
this.monthPicker.on('click',this.onMonthClick,this);
this.monthPicker.on('dblclick',this.onMonthDblClick,this);
this.mpMonths=this.monthPicker.select('td.x-date-mp-month');
this.mpYears=this.monthPicker.select('td.x-date-mp-year');
this.mpMonths.each(function (m,a,i) {
i+=1;
if((i%2)==0) {
m.dom.xmonth=5+Math.round(i*.5);
}else {
m.dom.xmonth=Math.round((i-1)*.5);
}
});
}
},
showMonthPicker:function () {
this.createMonthPicker();
var size=this.el.getSize();
this.monthPicker.setSize(size);
this.monthPicker.child('table').setSize(size);
this.mpSelMonth=(this.activeDate||this.value).getMonth();
this.updateMPMonth(this.mpSelMonth);
this.mpSelYear=(this.activeDate||this.value).getFullYear();
this.updateMPYear(this.mpSelYear);
this.monthPicker.show();
//this.monthPicker.slideIn('t', {duration:.2});
},
updateMPYear:function (y) {
if(this.noPastYears) {
var minYear=new Date().getFullYear();
if(y<(minYear+4)) {
y=minYear+4;
}
}
this.mpyear=y;
var ys=this.mpYears.elements;
for(var i=1;i<=10;i++) {
>b33gDfBb33#$6b3333#GF#Rb33#b33#Bb33b33#VDG'VR#GRb33fVb33# |
|
转播
