4

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 !

JkSuf
  • 343
  • 1
  • 6
  • 22

2 Answers2

18

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

Igor Semin
  • 2,486
  • 1
  • 20
  • 21
  • Thanks a lot for your answer :) ! I have been trying this solution, but the problem is that the user still needs to select the day to select the date. Which is meaning less in my use case, the user shouldn't even see the days ^^ ! – JkSuf Jan 27 '15 at 10:15
  • One more question, I have an extjs application, generated by senchaCMD. I have copy/paste the definition of the component in my view folder (changing the first parameter path). I required this component in my main view, and displayed it. But it only renders a simple text field with the date field label. Note that if I write an invalide date format, a tooltip warns me about the date format. My guess is that I miss some css or js files in my build. The icon representing a calendar is not visible like in you sencha fiddle. Any advice on how I should integrate this component to an extjs5 app? – JkSuf Jan 27 '15 at 15:10
  • It seems that I can't display native Ext.form.field.Date either :D ! – JkSuf Jan 27 '15 at 15:16
  • So I rebuild the app with sencha cmd, the field is now correctly displayed. But when I click on a month a year or any button (ok or cancel) the picker dispapear and don't write any dat in the field. Just like described in this topic : [link]http://stackoverflow.com/questions/25979828/extjs-5-xtype-datefield-is-not-working-when-selecting-month-or-year BUT i'm using extjs 5.1.0.107 in which it should have been corrected ^^ ! – JkSuf Jan 28 '15 at 08:08
  • To see my problem, just load your fiddle and use extjs 5.1 instead of extjs 5.0 version ^^ ! – JkSuf Jan 28 '15 at 15:51
  • I have a similar problem with ExtJS 4.2.1. The last row of the Month and Year do not show up. You can see what I mean by changing the ExtJS version to 4.2.1 Neptune on the above Fiddle. Can anyone help me fixing it, so that I can see the last row on Month and Year? May be it's with certain style sheet configuration for .x-monthpicker-body or something like that? – rajugaadu Aug 28 '15 at 23:39
  • 1
    @rajugaadu, seems they correct in 5 version, for 4.2 i just would add height(236 px) - return Ext.create('Ext.picker.Month', { ... height: '236px' ... }); – Igor Semin Aug 29 '15 at 06:03
  • that's preceisly what I did @IgorSemin. Sorry for seeing your response after such a long time. – rajugaadu Oct 16 '15 at 04:04
5

Update to Extjs 5.1: Add to listeners:

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.

Mamoun Benghezal
  • 5,264
  • 7
  • 28
  • 33
Perr1
  • 51
  • 1
  • 1
  • it save my day. BTW from this answer it seems only Chrome problem http://stackoverflow.com/questions/28197217/month-field-on-extjs-5-1 – nahab Jun 19 '15 at 11:00
  • Adding this help to prevent non-visibility upon selection in Chrome – G 1 Jun 02 '19 at 01:21