最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - EXTJS 5 - Date picker year and month only - Stack Overflow

programmeradmin2浏览0评论

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 !

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 !

Share Improve this question edited Dec 15, 2015 at 10:15 JkSuf asked Jan 27, 2015 at 9:50 JkSufJkSuf 3431 gold badge6 silver badges23 bronze badges
Add a comment  | 

2 Answers 2

Reset to default 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

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.

发布评论

评论列表(0)

  1. 暂无评论