텍스트 필드를 클릭 할 때 datepicker를 표시하는 방법

Question

텍스트 필드 start_date 및 end_date에 표시하고 싶습니다. 여기를 클릭하면 각각에 대한 datepicker가 표시됩니다. 이것에 대한 제안. 다음은

사전

감사는 코드가

 Ext.define('CustomApp', { 
      extend: 'Rally.app.App', 
      componentCls: 'app', 
      _startDate : 0, 
      _endDate : 0, 
      launch: function() { 
       var that = this; 
       var minDate = new Date(new Date() - 8640000000*90); //milliseconds in day = 86400000 
       var datePicker = Ext.create('Ext.panel.Panel', { 
        title: 'Choose a PSI Dates', 
        bodyPadding: 10, 
        width: 400, 
        layout: { 
         type: 'hbox', 
        }, 
        renderTo: Ext.getBody(), 
        items: [{ 
         xtype: 'datepicker', 
         title: 'PSI start date', 
         minDate: minDate, 
         id: 'start_date', 
         handler: function(picker, date) {         
          that._startDate = Ext.getCmp('start_date').getValue(); 
         } 
        }, 
        { 
         xtype: 'datepicker', 
         title: 'PSI end date', 
         minDate: minDate, 
         id: 'end_date', 
         handler: function(picker, date) { 
          that._endDate = Ext.getCmp('end_date').getValue(); 
          that._prepareChart(); 
         } 

        } 
        ] 
       });   
       this.add(datePicker); 
       //this.add(enddatePicker);   
      }, 

Answer 1

사용하여 DateField 대신 날짜 선택기를 니펫을 아래

그리고이 이미지를입니다. JSFiddle

items: [{ 
      fieldLabel: 'Start Date', 
      xtype: 'datefield',    
      minDate: minDate, 
      id: 'start_date', 
      listeners: { 
       render: function(){ 
        var picker = this.getPicker(); 
        picker.on("select",function(){ this.hide(); }); 
        this.triggerCell.hide(); 
        this.inputCell.on("click",function(){             
         if(picker.hidden)        
          picker.show(); 
         else 
          picker.hide(); 
        });          
       } 
      } 
     }, { 
      fieldLabel: 'End Date', 
      xtype: 'datefield', 
      minDate: new Date(), 
      listeners: { 
       render: function(){ 
        var picker = this.getPicker(); 
        picker.on("select",function(){ this.hide(); }); 
        this.triggerCell.hide(); 
        this.inputCell.on("click",function(){             
         if(picker.hidden)        
          picker.show(); 
         else 
          picker.hide();        
        });          
       } 
      } 
    }] 

Answer 2

이 시도 :

{ 
    xtype: 'datefield', 
    name: 'order_date', 
    emptyText: '', 
    fieldLabel: 'Order Date', 
    hideLabel: true, 
    allowBlank: true, 
    margins: '0 10 0 10', 
    format:'d/m/Y', 
    submitFormat:'Y-m-d', 
    value: '', 
    maxValue: new Date(), 
    listeners:{ 
     render: function(cmp, eOpts){ 
      //this.triggerCell.hide(); 
      cmp.inputCell.on("click",function(){ 
       cmp.onTriggerClick(); 
      }); 
     } 
    } 
}