EXTJS 5 - 日期选择器仅限年份和月份 [英] EXTJS 5 - Date picker year and month only

问题描述

我猜这个问题已经被问了很多（因为我发现了几个话题），但是我仍然不知道如何渲染日期选择器，只显示月和年。
我想我可以这样做：

• 创建我自己的cuctom组件（但我认为我的Extjs的知识不是很好足够能够创建显示月份和年份的组件，并且在单击时会呈现年份和月份选择器。


• 使用一些在google上创建的代码（可以创建一个插件）我不知道如何在extjs中使用插件^^）


• 使用第三个图书馆的年度和月份选择器添加到我的extjs应用程序。

<你可以请我指导我选择什么，给我任何可以参考的链接？




感谢提前！

解决方案

Sencha没有这个组件，但是像这样我们得到它

  Ext.define（'Ext.form.field.Month'，{
 extends：'Ext.form.field.Date' 
别名：'widget.monthfield'，
要求：['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，
 float：true，
 hidden：true，
 focusOnShow：true，
 minDate：me.minValue，
 maxDate：me.maxValue，
 disabledDatesRE：me.disabledDatesRE， 
 disabledDatesText：me.disabledDatesText，
 disabledDays：me.disabledDays，
 disabledDaysText：me.disabledDaysText，
格式：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：{
范围：我，
 fn：me.onOK $ $ $ $ $ $ $ $ $ $ $％ ，
 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'，{
格式：'F，Y'，
 renderTo：Ext.getBody（）
}） ; 
  

小提琴示例




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.
• Use some code found on google which creates a plugin (but I dont know how to use plugins in extjs ^^").
• Use a third library year and month picker to add in my extjs application.

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

Thanks in advance !

解决方案

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

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

这篇关于EXTJS 5 - 日期选择器仅限年份和月份的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！