How to show datepicker on click of textfield

Question

I want to show to text fields start_date and end_date, while clicking on this should show the datepicker for each. Any suggestions on this. Thanks in advance

Below is the image

And below is the code snippet

        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

Try this:

{
    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();
            });
        }
    }
}

Answer 2

Use datefield instead of datepicker. 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();                            
                    });                                    
                }
            }
    }]