Extjs 5 - Date picker year only

Question

I would like date picker without day or month, just with year.

I would like this

EXTJS 5 - Date picker year and month only

but without month, just year.

Thanks

Answer 1

You can override picker to hide month part, and use this class for picker in date field. I make "display: none" for month section (to prvent change component's logic) and override style for picker's body (it's better make in CSS rules):

    Ext.define('Ext.ux.OnlyYearPicker', {
    xtype: 'onlyyearpicker',
    extend: 'Ext.picker.Month',

    afterRender: function(){
        this.callParent();
        this.el.setStyle({width: '106px',})
    },

    renderTpl: [
    '<div id="{id}-bodyEl" data-ref="bodyEl" class="{baseCls}-body">',
      '<div style="display: none; width:0px;" id="{id}-monthEl" data-ref="monthEl" class="{baseCls}-months">',
          '<tpl for="months">',
              '<div class="{parent.baseCls}-item {parent.baseCls}-month">',
                  '<a style="{parent.monthStyle}" role="button" hidefocus="on" class="{parent.baseCls}-item-inner">{.}</a>',
              '</div>',
          '</tpl>',
      '</div>',
      '<div id="{id}-yearEl" data-ref="yearEl" class="{baseCls}-years">',
          '<div class="{baseCls}-yearnav">',
              '<div class="{baseCls}-yearnav-button-ct">',
                  '<a id="{id}-prevEl" data-ref="prevEl" class="{baseCls}-yearnav-button {baseCls}-yearnav-prev" hidefocus="on" role="button"></a>',
              '</div>',
              '<div class="{baseCls}-yearnav-button-ct">',
                  '<a id="{id}-nextEl" data-ref="nextEl" class="{baseCls}-yearnav-button {baseCls}-yearnav-next" hidefocus="on" role="button"></a>',
              '</div>',
          '</div>',
          '<tpl for="years">',
              '<div class="{parent.baseCls}-item {parent.baseCls}-year">',
                  '<a hidefocus="on" class="{parent.baseCls}-item-inner" role="button">{.}</a>',
              '</div>',
          '</tpl>',
      '</div>',
      '<div class="' + Ext.baseCSSPrefix + 'clear"></div>',
      '<tpl if="showButtons">',
          '<div class="{baseCls}-buttons">{%',
              'var me=values.$comp, okBtn=me.okBtn, cancelBtn=me.cancelBtn;',
              'okBtn.ownerLayout = cancelBtn.ownerLayout = me.componentLayout;',
              'okBtn.ownerCt = cancelBtn.ownerCt = me;',
              'Ext.DomHelper.generateMarkup(okBtn.getRenderTree(), out);',
              'Ext.DomHelper.generateMarkup(cancelBtn.getRenderTree(), out);',
          '%}</div>',
      '</tpl>',
    '</div>'
]
});

More details you will find at fiddler. Looks ugly, but work. I think that you will be better to use something like combobox. In case of DatePicker user expirience of selection with Ok button for a single value are very strange.

Fiddler

Answer 2

For people who has problems with Chrome, convert createPicker function into this :

    createPicker: function () { // Converted function to Chrome
        var me = this,
            format = Ext.String.format,
            pickerConfig;

        pickerConfig = {
            pickerField: me,
            ownerCmp: me,
            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();
                }
            },
        };

        if (Ext.isChrome) {
            me.originalCollapse = me.collapse;
            pickerConfig.listeners.boxready = {
                fn: function () {
                    this.picker.el.on({
                        mousedown: function () {
                            this.collapse = Ext.emptyFn;
                        },
                        mouseup: function () {
                            this.collapse = this.originalCollapse;
                        },
                        scope: this
                    });
                },
                scope: me,
                single: true
            };
        }

        return Ext.create('Ext.ux.OnlyYearPicker', pickerConfig);
    },

You can see an example here : https://fiddle.sencha.com/#fiddle/1lmp

Without, your picker will disappear at every click on year select.