Calendar with Start and End Date

  source

Ext.application({
    name: 'App',
    
    launch: function() {
        
        var datePicker1 = Ext.create('Ext.picker.Date',{value:new Date(), modal:false, floating:false, cancelButton:null, doneButton:null});
        var datePicker2 = Ext.create('Ext.picker.Date',{value:new Date(), modal:false, floating:false, cancelButton:null, doneButton:null});
        
        
        
        var panel = Ext.create('Ext.Panel', {   
              layout:'hbox', 
            fullscreen:true,
             items:[
                {
                    xtype:'container',
                    flex:1,
                    items:[
                  datePicker1
            ]
                },               {
                    xtype:'container',
                    flex:1,
                    items:[
                  datePicker2
            ]
                }
            ]
        });
       
        datePicker1.show({type:'fade'});
        datePicker2.show({type:'fade'});
        var slots = Ext.Array.merge([],  datePicker1.query('pickerslot '),  datePicker2.query('pickerslot ') );
        
        Ext.Array.each( slots, function(slot){
            //itemtouchmove is very expensive, use something else ;)
            slot.on('itemtouchmove',  function(){ console.log( 'picked', datePicker1.getValue(true), datePicker2.getValue(true) );}, 2000);
        });

    }
});