javascript - 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 的情况下，用户使用 Ok 按钮选择单个值的体验非常奇怪。

Fiddler