1:ext3版本插件
来自官方论坛:http://www.sencha.com/forum/showthread.php?74002-3.x-Ext.ux.MonthMenu
插件代码:
- Ext.ux.MonthPickerPlugin = function() {
- var picker;
- var oldDateDefaults;
- this.init = function(pk) {
- picker = pk;
- picker.onTriggerClick = picker.onTriggerClick.createSequence(onClick);
- picker.getValue = picker.getValue.createInterceptor(setDefaultMonthDay).createSequence(restoreDefaultMonthDay);
- picker.beforeBlur = picker.beforeBlur.createInterceptor(setDefaultMonthDay).createSequence(restoreDefaultMonthDay);
- };
- function setDefaultMonthDay() {
- oldDateDefaults = Date.defaults.d;
- Date.defaults.d = 1;
- return true;
- }
- function restoreDefaultMonthDay(ret) {
- Date.defaults.d = oldDateDefaults;
- return ret;
- }
- function onClick(e, el, opt) {
- var p = picker.menu.picker;
- p.activeDate = p.activeDate.getFirstDateOfMonth();
- if (p.value) {
- p.value = p.value.getFirstDateOfMonth();
- }
- p.showMonthPicker();
- if (!p.disabled) {
- p.monthPicker.stopFx();
- p.monthPicker.show();
- p.mun(p.monthPicker, 'click', p.onMonthClick, p);
- p.mun(p.monthPicker, 'dblclick', p.onMonthDblClick, p);
- p.onMonthClick = p.onMonthClick.createSequence(pickerClick);
- p.onMonthDblClick = p.onMonthDblClick.createSequence(pickerDblclick);
- p.mon(p.monthPicker, 'click', p.onMonthClick, p);
- p.mon(p.monthPicker, 'dblclick', p.onMonthDblClick, p);
- }
- }
- function pickerClick(e, t) {
- var el = new Ext.Element(t);
- if (el.is('button.x-date-mp-cancel')) {
- picker.menu.hide();
- } else if(el.is('button.x-date-mp-ok')) {
- var p = picker.menu.picker;
- p.setValue(p.activeDate);
- p.fireEvent('select', p, p.value);
- }
- }
- function pickerDblclick(e, t) {
- var el = new Ext.Element(t);
- if (el.parent()
- && (el.parent().is('td.x-date-mp-month')
- || el.parent().is('td.x-date-mp-year'))) {
- var p = picker.menu.picker;
- p.setValue(p.activeDate);
- p.fireEvent('select', p, p.value);
- }
- }
- };
- Ext.preg('monthPickerPlugin', Ext.ux.MonthPickerPlugin);
调用例子:
- new Ext.form.DateField({
- renderTo: document.body,
- plugins:'monthPickerPlugin',
- name:'rq',
- format: 'Y-m'
- });
2:Ext2版本(测试2.0.2成功)
插件代码见附件
使用例子:
引入: <script type="text/javascript" src="DatePicker.js"></script>
<script type="text/javascript" src="DateField.js"></script>
- {
- xtype : "datefield",
- fieldLabel : "date",
- format:'Y-m'
- }
效果图:
3:Ext4版本 年月插件:
- /** Months picker
- 重写 field.Date
- **/
- Ext.define('Ext.form.field.Month', {
- extend:'Ext.form.field.Date',
- alias: 'widget.monthfield',
- requires: ['Ext.picker.Month'],
- alternateClassName: ['Ext.form.MonthField', 'Ext.form.Month'],
- selectMonth: null,
- createPicker: function() {
- var me = this,
- format = Ext.String.format;
- return Ext.create('Ext.picker.Month', {
- pickerField: me,
- ownerCt: me.ownerCt,
- renderTo: document.body,
- floating: true,
- hidden: true,
- focusOnShow: true,
- minDate: me.minValue,
- maxDate: me.maxValue,
- disabledDatesRE: me.disabledDatesRE,
- disabledDatesText: me.disabledDatesText,
- disabledDays: me.disabledDays,
- disabledDaysText: me.disabledDaysText,
- format: me.format,
- showToday: me.showToday,
- startDay: me.startDay,
- minText: format(me.minText, me.formatDate(me.minValue)),
- maxText: format(me.maxText, me.formatDate(me.maxValue)),
- listeners: {
- select: { scope: me, fn: me.onSelect },
- monthdblclick: { scope: me, fn: me.onOKClick },
- yeardblclick: { scope: me, fn: me.onOKClick },
- OkClick: { scope: me, fn: me.onOKClick },
- CancelClick: { scope: me, fn: me.onCancelClick }
- },
- keyNavConfig: {
- esc: function() {
- me.collapse();
- }
- }
- });
- },
- onCancelClick: function() {
- var me = this;
- me.selectMonth = null;
- me.collapse();
- },
- onOKClick: function() {
- var me = this;
- if( me.selectMonth ) {
- me.setValue(me.selectMonth);
- me.fireEvent('select', me, me.selectMonth);
- }
- me.collapse();
- },
- onSelect: function(m, d) {
- var me = this;
- me.selectMonth = new Date(( d[0]+1 ) +'/1/'+d[1]);
- }
- });
- /** Months picker **/
- /********************************************************************************/
- //使用时
- xtype: 'monthfield', //引用类型为上面自定义的部分
- editable : false,
- format : 'Y/m',//格式化数据
- fieldLabel: 'beginDate',
- value : new Date() //最好加上默认时间 否则在第一次点击的时候 如果没有选择数据就点击OK的话 数据无法展示在对话框中
- ext2版本插件只显示年月-datefield.rar (9.5 KB)
- 下载次数: 119
- Ext4相关文件.rar (1.6 KB)
- 下载次数: 83