[Code] Enable Ext. DatePicker to display only the year and month selection page

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" tabindex = "1"> <i> <span> </I> </a> </TD> '; <br/>}< br/> M [M. length] = '</tr> </tbody> </table> </TD> </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. classnm E = "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. chil D ("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: ". x-d Ate-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-MIDD Le ", 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. toda Ytip, today), <br/> handler: This. selecttoday, <br/> scope: This <br/>}); <br/> If (ext. isie) {<br/> This. el. repaint (); <br/>}< br/> This. update (this. value); <br/> // manually triggered button to display the form. <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); // close the form <br/>} else if (El. is ('button. x-date-MP-OK) {<br/> // set the value <br/> This. value = new date (this. mpselyear, this. mpselmonth, <br/> (this. activedate | this. value ). getdate (); <br/> If (this. format. indexof ('D') =-1) {<br/> // call the value echo method and pass the selected value to the past. close the form <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-da Te-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/> // when the format does not contain D, date control does not Display page of day <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/> selecttoday: function (seldate) {<br/> This. setvalue (new date (). cleartime (); <br/> // The date value here is passed in from the outside, and the value is updated <br/> If (seldate! = NULL & seldate! = Undefined & seldate! = "") {<Br/> This. setvalue (seldate); <br/>}< br/> This. fireevent ("select", this, this. value); <br/>}< br/>}) <br/>

 

This code is stored in Ext. Reg ('dateicker', ext. datepicker.

You can create a new JS file and load it after the ext-all.js.