ExtJs4 日期 年月选择控件
原文作者：http://ext4all.com/post/ext4-monthfield-with-month-picker-for-extjs4
某论坛弄下来的，。原文如下：
我也来发一个年月选择控件，因为某些场合只需要年份和月份信息，直接使用日期控件，虽然能通过format等方式可以得到，但是还要选择日期才能完成输 入，比较麻烦，在网上找了一下，搜索到两个，都是2.x版的；于是就自己动手写一个，在4.1版中测试通过。给需要的朋友，效果如下图：
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|m-y|m-Y|my|mY|y/m|Y/m|y-m|Y-m|ym|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: '日期', editable: false, width: 150, labelWidth: 30, labelAlign: 'right', format: 'Y-m' }, { xtype: 'monthfield', fieldLabel: '日期', editable: false, width: 150, labelWidth: 30, labelAlign: 'right', format: 'Ym' } ] }); }); </script> </head> <body > </body> </html>
DataPicker 时分秒插件：