EXTJS 5 - 日期选择器仅限年份和月份

Question

我想这个问题已经被问了很多（因为我发现了一些关于它的话题），但我仍然不知道如何通过只显示月份和年份来呈现日期选择器。我想我可以做不同的事情：

创建我自己的 cuctom 组件（但我认为我对 Extjs 的了解还不足以创建一个显示月份和年份的组件，并且在单击时呈现年份和月份选择器。
使用在 google 上找到的一些代码来创建插件（但我不知道如何在 extjs 中使用插件 ^^"）。
使用第三个库年月选择器添加到我的 extjs 应用程序中。

你们能指导我完成我应该做的事情吗select，并给我任何可以参考的链接？

提前致谢！

Answer 1

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

Answer 2

Extjs 5.1 更新：添加到听众：

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

防止主字段选择器丢失模糊。在原始版本中，如果您单击月份选择器，它会失去对日期选择器的关注，因此日期选择器会隐藏所有选择器。

EXTJS 5 - 日期选择器仅限年份和月份

EXTJS 5 - Date picker year and month only

javascript

extjs

datepicker

extjs5