Extjs 5 - 仅日期选择器年份

Question

我想要没有日期或月份的日期选择器，只有年份。

我想要这个

EXTJS 5 - Date picker year and month only

但没有月份，只有年份。

谢谢

Answer 1

您可以覆盖选择器以隐藏月份部分，并将此类用于日期字段中的选择器。我为月份部分制作了“显示：无”（以防止更改组件的逻辑）并覆盖选择器主体的样式（最好在 CSS 规则中制作）：

    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>'
]
});

您可以在 fiddler 找到更多详细信息。看起来丑陋，但工作。我认为你会更好地使用组合框之类的东西。如果 DatePicker 用户使用确定按钮选择单个值的体验非常奇怪。

Fiddler

Answer 2

对于 Chrome 有问题的人，请将 createPicker 函数转换为：

    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);
    },

您可以在此处查看示例：https://fiddle.sencha.com/#fiddle/1lmp

没有，您的选择器将在每次点击年份选择时消失。