EXTJS 5 -日期选择器仅适用于年份和月份

I guess this question has been asked a lot (as I found a few topics about it), but I still don't really know how to render a date picker, by only displaying month and year. I think I can do this differently:

我想这个问题已经被问了很多次了(我发现了一些关于它的主题)，但是我仍然不知道如何渲染日期选择器，只显示月份和年份。我想我可以做不同的事情:

Create my own cuctom component (but I think my knowledge of Extjs is not good enough to be able to create a component which displays the month and year, and, when clicked, renders a year and month picker.
创建我自己的cuctom组件(但我认为我对Extjs的了解还不够好，无法创建一个显示月份和年份的组件，当单击时，将呈现一个年和月选择器。
Use some code found on google which creates a plugin (but I dont know how to use plugins in extjs ^^").
使用一些代码在谷歌上发现它创建了一个插件(但我不知道如何使用插件在extjs ^ ^”)。
Use a third library year and month picker to add in my extjs application.
使用第三个库年和月选择器来添加extjs应用程序。

Could you guys please guide me through what I should select, and give me any links I can refer to ?

请各位指导我选择什么，并给我一些可以参考的链接。

Thanks in advance !

提前谢谢!

2 个解决方案

#1

Sencha don't have this component, but something like this we are get it

Sencha没有这个组件，但是像这样的东西我们得到了。

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]);
    }
});

...

…

Ext.create('Ext.form.field.Month', {
    format: 'F, Y',
    renderTo: Ext.getBody()
});

Fiddle example

小提琴的例子

#2

Update to Extjs 5.1: Add to listeners:

更新到Extjs 5.1:添加到监听器:

afterrender : {
                    scope : me,
                    fn : function(c) {
                        var me = c;
                        me.el.on("mousedown", function(e) {
                            e.preventDefault();
                        }, c);
                    }
                },

It prevent from lost blur of main field picker. In orginal version if you click on month picker it behave as it lost focus on date picker, so date picker hide all pickers.

防止主场选择器丢失模糊。在原始版本中，如果你点击月选择器，它会表现为它失去了对日期选择器的关注，所以日期选择器隐藏了所有的选择器。

#1