Ext.override(Ext.DatePicker, { onRender : function(container, position) { var m = [ '<table cellspacing="0">', '<tr><td class="x-date-left"><a href="#" mce_href="#" title="', this.prevText, '"> </a></td><td class="x-date-middle" align="center"></td><td class="x-date-right"><a href="#" mce_href="#" title="', this.nextText, '"> </a></td></tr>', '<tr><td colspan="3"><table class="x-date-inner" cellspacing="0"><thead><tr>']; var dn = this.dayNames; for (var i = 0; i < 7; i++) { var d = this.startDay + i; if (d > 6) { d = d - 7; } m.push("<th><span>", dn[d].substr(0, 1), "</span></th>"); } m[m.length] = "</tr></thead><tbody><tr>"; for (var i = 0; i < 42; i++) { if (i % 7 == 0 && i != 0) { m[m.length] = "</tr><tr>"; } m[m.length] = '<td><a href="#" mce_href="#" hidefocus="on" class="x-date-date" tabIndex="1"><i><span></span></i></a></td>'; } m[m.length] = '</tr></tbody></table></td></tr><tr><td colspan="3" class="x-date-bottom" align="center"></td></tr></table><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.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.fireEvent('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()); if (this.format.indexOf('d') == -1) { // 调用值回显的方法,并将选择的值传递过去.最后关闭窗体 this.selectToday(this.value); } else { this.update(this.value); this.hideMonthPicker(); } } 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) { // 当format中没有d时,日期控件不显示日的界面 if (this.format.indexOf('d') != -1) { 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); } }) 此代码放于Ext.reg('datepicker', Ext.DatePicker);之后即可. 可以新建一个js文件,在ext-all.js之后加载.