请各位帮忙,
在EXt js 中如何设置日历控件,只显示月份和年份,
就当单击日历控件后只会显示年月,不显示号数
[b]问题补充:[/b]
当单击日历控件就直接出现 :查看图片附件 ,选择好后单击确定就可以得到年月,不应在选择几号
楼主参照下面的代码即可,只需要看有注释的地方,即可帮你实现你的效果。
[code="java"]
Ext.override(Ext.DatePicker, {
onRender : function(container, position) {
var m = [
'
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.eventEl = Ext.get(el.firstChild);
new Ext.util.ClickRepeater(this.el.child("td.x-date-left a"), {
handler : this.showPrevMonth,
scope : this,
preventDefault : true,
stopDefault : true
});
new Ext.util.ClickRepeater(this.el.child("td.x-date-right a"), {
handler : this.showNextMonth,
scope : this,
preventDefault : true,
stopDefault : true
});
this.eventEl.on("mousewheel", this.handleMouseWheel, this);
this.monthPicker = this.el.down('div.x-date-mp');
this.monthPicker.enableDisplayMode('block');
var kn = new Ext.KeyNav(this.eventEl, {
"left" : function(e) {
e.ctrlKey ? this.showPrevMonth() : this.update(this.activeDate
.add("d", -1));
},
"right" : function(e) {
e.ctrlKey ? this.showNextMonth() : this.update(this.activeDate
.add("d", 1));
},
"up" : function(e) {
e.ctrlKey ? this.showNextYear() : this.update(this.activeDate
.add("d", -7));
},
"down" : function(e) {
e.ctrlKey ? this.showPrevYear() : this.update(this.activeDate
.add("d", 7));
},
"pageUp" : function(e) {
this.showNextMonth();
},
"pageDown" : function(e) {
this.showPrevMonth();
},
"enter" : function(e) {
e.stopPropagation();
return true;
},
scope : this
});
this.eventEl.on("click", this.handleDateClick, this, {
delegate : "a.x-date-date"
});
this.eventEl.addKeyListener(Ext.EventObject.SPACE, this.selectToday,
this);
this.el.unselectable();
this.cells = this.el.select("table.x-date-inner tbody td");
this.textNodes = this.el.query("table.x-date-inner tbody span");
this.mbtn = new Ext.Button({
text : " ",
tooltip : this.monthYearText,
renderTo : this.el.child("td.x-date-middle", true)
});
this.mbtn.on('click', this.showMonthPicker, this);
this.mbtn.el.child(this.mbtn.menuClassTarget)
.addClass("x-btn-with-menu");
var today = (new Date()).dateFormat(this.format);
this.todayBtn = new Ext.Button({
renderTo : this.el.child("td.x-date-bottom", true),
text : String.format(this.todayText, today),
tooltip : String.format(this.todayTip, today),
handler : this.selectToday,
scope : this
});
if (Ext.isIE) {
this.el.repaint();
}
this.update(this.value);
//手动触发按钮,显示窗体。
this.mbtn.getEl().dom.click();
},
onMonthClick : function(e, t) {
e.stopEvent();
var el = new Ext.Element(t), pn;
if (el.is('button.x-date-mp-cancel')) {
this.selectToday(this.value); //关闭窗体
} else if (el.is('button.x-date-mp-ok')) {
//设置值
this.value = new Date(this.mpSelYear, this.mpSelMonth,(this.activeDate || this.value).getDate());
//调用值回显的方法,并将选择的值传递过去.最后关闭窗体
this.selectToday(this.value);
// this.update(new Date(this.mpSelYear, this.mpSelMonth, (this.activeDate || this.value).getDate()));
} else if (pn = el.up('td.x-date-mp-month', 2)) {
this.mpMonths.removeClass('x-date-mp-sel');
pn.addClass('x-date-mp-sel');
this.mpSelMonth = pn.dom.xmonth;
} else if (pn = el.up('td.x-date-mp-year', 2)) {
this.mpYears.removeClass('x-date-mp-sel');
pn.addClass('x-date-mp-sel');
this.mpSelYear = pn.dom.xyear;
} else if (el.is('a.x-date-mp-prev')) {
this.updateMPYear(this.mpyear - 10);
} else if (el.is('a.x-date-mp-next')) {
this.updateMPYear(this.mpyear + 10);
}
},
hideMonthPicker : function(disableAnim) {
//去掉这个方法,日期控件就不会显示年/月/日的界面了
/*if (this.monthPicker) {
if (disableAnim === true) {
//this.monthPicker.hide();
} else {
// this.monthPicker.slideOut('t', {duration:.2});
}
}*/
},
selectToday : function(selDate) {
this.setValue(new Date().clearTime());
//这里的日期值从外部传入,更新value
if (selDate != null && selDate != undefined && selDate != "") {
this.setValue(selDate);
}
this.fireEvent("select", this, this.value);
}
})
[/code]
看了一下api没有相关配置选项,只能配置成那些日期不能选择.
自带的datefield好像不支持。
可以自己写一个控件,只显示年月的。