Extjs 5 - 日付ピッカー年のみ

Question

日付ピッカーは、日または月がなく、年を指定してください。

私はこの

EXTJS 5 - Date picker year and month only

が、月のない、ただ年をしたいと思います。

おかげ

Answer 1

あなたは月の部分を非表示にするピッカーをオーバーライドして、日付フィールドにピッカーのためにこのクラスを使用することができます。 （それが良いCSSルールで行います）（prvent変化成分のロジックに）月のセクションのためのピッカーの体のスタイルを上書き：私は「なし表示」：作るあなたはシオマネキで見つかります

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

詳細を。見た目は醜いですが、仕事があります。私はあなたがコンボボックスのようなものを使う方が良いと思います。 DatePickerユーザーの場合、OKボタンを使用した単一の値に対する選択の終了は非常に奇妙です。あなたのピッカーで、すべて消えます、なければhttps://fiddle.sencha.com/#fiddle/1lmp

：あなたがここでは例を見ることができます

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

：Chromeで問題を持っている人、このにcreatePicker機能を変換するために

Fiddler

Answer 2

年選択をクリックします。