[code]使Ext.DatePicker只顯示年月選擇介面

Ext.override(Ext.DatePicker, {<br />onRender : function(container, position) {<br />var m = [<br />'<table cellspacing="0">',<br />'<tr><td class="x-date-left"><a href="#" mce_href="#" title="',<br />this.prevText,<br />'"> </a></td><td class="x-date-middle" align="center"></td><td class="x-date-right"><a href="#" mce_href="#" title="',<br />this.nextText, '"> </a></td></tr>',<br />'<tr><td colspan="3"><table class="x-date-inner" cellspacing="0"><thead><tr>'];<br />var dn = this.dayNames;<br />for (var i = 0; i < 7; i++) {<br />var d = this.startDay + i;<br />if (d > 6) {<br />d = d - 7;<br />}<br />m.push("<th><span>", dn[d].substr(0, 1), "</span></th>");<br />}<br />m[m.length] = "</tr></thead><tbody><tr>";<br />for (var i = 0; i < 42; i++) {<br />if (i % 7 == 0 && i != 0) {<br />m[m.length] = "</tr><tr>";<br />}<br />m[m.length] = '<td><a href="#" mce_href="#" hidefocus="on" class="x-date-date" tabIndex="1"><i><span></span></i></a></td>';<br />}<br />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>';<br />var el = document.createElement("div");<br />el.className = "x-date-picker";<br />el.innerHTML = m.join("");<br />container.dom.insertBefore(el, position);<br />this.el = Ext.get(el);<br />this.eventEl = Ext.get(el.firstChild);<br />new Ext.util.ClickRepeater(this.el.child("td.x-date-left a"), {<br />handler : this.showPrevMonth,<br />scope : this,<br />preventDefault : true,<br />stopDefault : true<br />});<br />new Ext.util.ClickRepeater(this.el.child("td.x-date-right a"), {<br />handler : this.showNextMonth,<br />scope : this,<br />preventDefault : true,<br />stopDefault : true<br />});<br />this.eventEl.on("mousewheel", this.handleMouseWheel, this);<br />this.monthPicker = this.el.down('div.x-date-mp');<br />this.monthPicker.enableDisplayMode('block');<br />var kn = new Ext.KeyNav(this.eventEl, {<br />"left" : function(e) {<br />e.ctrlKey ? this.showPrevMonth() : this.update(this.activeDate<br />.add("d", -1));<br />},<br />"right" : function(e) {<br />e.ctrlKey ? this.showNextMonth() : this.update(this.activeDate<br />.add("d", 1));<br />},<br />"up" : function(e) {<br />e.ctrlKey ? this.showNextYear() : this.update(this.activeDate<br />.add("d", -7));<br />},<br />"down" : function(e) {<br />e.ctrlKey ? this.showPrevYear() : this.update(this.activeDate<br />.add("d", 7));<br />},<br />"pageUp" : function(e) {<br />this.showNextMonth();<br />},<br />"pageDown" : function(e) {<br />this.showPrevMonth();<br />},<br />"enter" : function(e) {<br />e.stopPropagation();<br />return true;<br />},<br />scope : this<br />});<br />this.eventEl.on("click", this.handleDateClick, this, {<br />delegate : "a.x-date-date"<br />});<br />this.eventEl.addKeyListener(Ext.EventObject.SPACE, this.selectToday,<br />this);<br />this.el.unselectable();<br />this.cells = this.el.select("table.x-date-inner tbody td");<br />this.textNodes = this.el.query("table.x-date-inner tbody span");<br />this.mbtn = new Ext.Button({<br />text : " ",<br />tooltip : this.monthYearText,<br />renderTo : this.el.child("td.x-date-middle", true)<br />});<br />this.mbtn.on('click', this.showMonthPicker, this);<br />this.mbtn.el.child(this.mbtn.menuClassTarget)<br />.addClass("x-btn-with-menu");<br />var today = (new Date()).dateFormat(this.format);<br />this.todayBtn = new Ext.Button({<br />renderTo : this.el.child("td.x-date-bottom", true),<br />text : String.format(this.todayText, today),<br />tooltip : String.format(this.todayTip, today),<br />handler : this.selectToday,<br />scope : this<br />});<br />if (Ext.isIE) {<br />this.el.repaint();<br />}<br />this.update(this.value);<br />// 手動觸發按鈕，顯示表單。<br />this.mbtn.fireEvent('click');<br />},<br />onMonthClick : function(e, t) {<br />e.stopEvent();<br />var el = new Ext.Element(t), pn;<br />if (el.is('button.x-date-mp-cancel')) {<br />this.selectToday(this.value); // 關閉表單<br />} else if (el.is('button.x-date-mp-ok')) {<br />// 設定值<br />this.value = new Date(this.mpSelYear, this.mpSelMonth,<br />(this.activeDate || this.value).getDate());<br />if (this.format.indexOf('d') == -1) {<br />// 調用值回顯的方法，並將選擇的值傳遞過去.最後關閉表單<br />this.selectToday(this.value);<br />} else {<br />this.update(this.value);<br />this.hideMonthPicker();<br />}<br />} else if (pn = el.up('td.x-date-mp-month', 2)) {<br />this.mpMonths.removeClass('x-date-mp-sel');<br />pn.addClass('x-date-mp-sel');<br />this.mpSelMonth = pn.dom.xmonth;<br />} else if (pn = el.up('td.x-date-mp-year', 2)) {<br />this.mpYears.removeClass('x-date-mp-sel');<br />pn.addClass('x-date-mp-sel');<br />this.mpSelYear = pn.dom.xyear;<br />} else if (el.is('a.x-date-mp-prev')) {<br />this.updateMPYear(this.mpyear - 10);<br />} else if (el.is('a.x-date-mp-next')) {<br />this.updateMPYear(this.mpyear + 10);<br />}<br />},<br />hideMonthPicker : function(disableAnim) {<br />// 當format中沒有d時，日期控制項不顯示日的介面<br />if (this.format.indexOf('d') != -1) {<br />if (this.monthPicker) {<br />if (disableAnim === true) {<br />this.monthPicker.hide();<br />} else {<br />this.monthPicker.slideOut('t', {<br />duration : .2<br />});<br />}<br />}<br />}<br />},<br />selectToday : function(selDate) {<br />this.setValue(new Date().clearTime());<br />// 這裡的日期值從外部傳入，更新value<br />if (selDate != null && selDate != undefined && selDate != "") {<br />this.setValue(selDate);<br />}<br />this.fireEvent("select", this, this.value);<br />}<br />})<br />

 

此代碼放於Ext.reg('datepicker', Ext.DatePicker);之後即可.

可以建立一個js檔案,在ext-all.js之後載入.