Extjs4 date and month Selection Control

By http://ext4all.com/post/ext4-monthfield-with-month-picker-for-extjs4

A forum ,. The original article is as follows:

I also sent a date and month selection control, because in some cases, only the year and month information is required, and the date control is directly used, although it can be obtained through format or other methods, however, you have to select a date to complete the input, which is troublesome. You have searched for two on the Internet, both of which are 2. so I wrote one by myself and passed the test in the 4.1 version. To the desired friends, the effect is as follows:

Monthfield. js

Ext. Define ( '  Ext. UX. Form. monthfield  '  , {Extend:  '  Ext. Form. Field. Picker  '  , Alias:  ' Widget. monthfield  '  ,  //  Requires: ['ext. Picker. date'],  //  Alternateclassname: ['ext. Form. datefield ', 'ext. Form. date'],  Format:  "  Y-m  "  , Altformats:  "  M/Y | M-y | my | Y/M | Y-M | ym  " ,  //  Disableddaystext: "disabled ",  //  Disableddatestext: "disabled ",  //  Mintext: "the date in this field must be equal to or after {0 }",  //  Maxtext: "the date in this field must be equal to or before {0 }",  //  Invalidtext: "{0} is not a valid date-it must be in the format {1 }",  Triggercls: Ext. basecssprefix +'  Form-date-trigger  '  ,  //  Showtoday: True,  //  Inittime: '12 ',  //  Inittimeformat: 'h ',  Matchfieldwidth:  False  , Startday:  New  Date (), initcomponent: function (){ VaR Me = This  ; Me. disableddatesre = Null  ; Me. callparent () ;}, initvalue: function (){  VaR Me = This  , Value = Me. value;  If  (Ext. isstring (value) {me. Value = Ext. Date. parse (value, This . Format );}  If  (Me. Value) me. startday = Me. value; me. callparent () ;}, rawtovalue: function (rawvalue ){  Return Ext. Date. parse (rawvalue, This . Format) | rawvalue | Null  ;}, Valuetoraw: function (value ){  Return   This  . Formatdate (value) ;}, formatdate: function (date ){  Return Ext. isdate (date )? Ext. Date. dateformat (date, This  . Format): date;}, createpicker: function (){  VaR Me = This  , Format = Ext. String. format;  Return Ext. Create ( '  Ext. Picker. Month  '  ,{  //  Renderto: Me. El, Pickerfield: me, ownerct: Me. ownerct, renderto: Document. Body, floating:  True  , Shadow:  False  , Focusonshow:  True  , Listeners: {scope: me, cancelclick: me. oncancelclick, okclick: me. onokclick, yeardblclick: me. onokclick, monthdblclick: me. onokclick}) ;}, onexpand: function (){  //  This. Picker. Show ();          This . Picker. setvalue ( This  . Startday );  //  },  //  Oncollapse: function (){  //  This. Focus (false, 60 );  //  },  Onokclick: function (Picker, value ){  VaR Me = This  , Month = Value [0  ], Year = Value [ 1  ], Date = New Date (year, month, 1  ); Me. startday = Date; me. setvalue (date );  This  . Picker. Hide ();  //  This. Blur ();  }, Oncancelclick: function (){  This . Picker. Hide ();  //  This. Blur ();  }}); 

 

 <  Html  >  <  Head  >   <  Title  > Insurance report </  Title  > <  Link  REL  = "Stylesheet"  Type  = "Text/CSS"  Href  = "Resources/CSS/ext-all.css"   />   <  Script  Type  = "Text/JavaScript"  SRC  = "Ext-all.js"  > </ Script  >  <  Script  Type  = "Text/JavaScript"  SRC  = "Monthfield. js"  > </  Script  >  <  Script  Type  = "Text/JavaScript"  SRC = "Ext-lang-zh_CN.js"  > </  Script  >  <  Script  Type  = "Text/JavaScript"  >  Ext. onready (  Function  (){  VaR  Form =  Ext. Create (  '  Ext. Form. Panel  '  , {Renderto: Ext. getbody (), title:  '  Simple Form  '  , Height:  500 , Layout:  '  Hbox  '  , Items: [{xtype:  '  Monthfield  '  , Fieldlabel:  '  Date '  , Editable:  False  , Width:  150  , Labelwidth:  30  , Labelalign:  '  Right  ' , Format:  '  Y-m  '  }, {Xtype:  '  Monthfield  '  , Fieldlabel:  '  Date '  , Editable:  False  , Width:  150  , Labelwidth:  30  , Labelalign:  '  Right  ' , Format:  '  Ym  '  }]}) ;});  </  Script  >  </  Head  >  <  Body  > </  Body  >  </  Html  > 

 

Datapicker:

Http://www.sencha.com/forum/showthread.php? 137242-ext.ux.datetimefield-datetimepicker-for-ext4-also-datetimemenu-timepickerfield