JavaScript
CSS
HTML
Run Code
Open in Fiddle
Ext.application( { name: 'Fiddle', launch: function() { //demo panel Ext.create('Ext.panel.Panel', { renderTo: 'demoPanelDiv', title: 'Date Range Picker Demo', width: 750, height: 270, bodyPadding: 15, layout: { type: 'hbox', pack: 'end' }, items: [ { xtype: 'container', width: 260, items: [ { xtype: 'displayfield', xRole: 'info', style: {backgroundColor: 'yellow'}, value: 'Use the picker to adjust the period as needed, then open the console and click \'Get Picker Data\' button to inspect the returned object' } ,{ xtype: 'displayfield', value: 'The datefields below can be bound (if needed) to the picker' } ,{ xtype: 'datefield', fieldStyle: 'text-align:right', id: 'startDateField', fieldLabel: 'Start Date' } ,{ xtype: 'datefield', fieldStyle: 'text-align:right', id: 'endDateField', fieldLabel: 'End Date' } ] } ], listeners: { afterrender: function(panel) { panel.addDocked( { xtype: 'toolbar', dock: 'top', items: [ { xtype: 'daterangepicker', drpDefaults: { selectedStart: '1974-02-26', selectedEnd: '2014-02-26', dateFormat: 'd F Y', showButtonTip: true, showTimePickers: true, timeFormat: 'g:i:s A', timeIncrement: 30, timePickerFromValue: '5:55:55 PM', timePickerToValue: '4:44:44 pm', timePickersEditable: true, timePickersQueryDelay: 500, timePickersWidth: 120, mainBtnTextPrefix: 'Period: ', //mainBtnIconCls: 'drp-icon-yes', mainBtnTextColor: '#ff0000', presetPeriodsBtnText: 'Fixed periods', //presetPeriodsBtnIconCls: 'drp-icon-yes', confirmBtnText: 'Confirm', //confirmBtnIconCls: 'drp-icon-calendar', bindDateFields: true, boundStartField: Ext.getCmp('startDateField'), boundEndField: Ext.getCmp('endDateField') }, listeners: { menuhide: function(btn) { btn.up('panel').down('displayfield[xRole=info]').setValue ( '<b>Period contains</b><br>' + btn.getPickerValue().periodDetailsPrecise.diffAsText + '<br>OR<br>' + btn.getPickerValue().periodDetails.yearsCount + ' years ' + btn.getPickerValue().periodDetails.monthsCount + ' months ' + btn.getPickerValue().periodDetails.weeksCount + ' weeks ' + btn.getPickerValue().periodDetails.daysCount + ' days ' + btn.getPickerValue().periodDetails.hoursCount + ' hours ' + btn.getPickerValue().periodDetails.minutesCount + ' minutes ' + btn.getPickerValue().periodDetails.secondsCount + ' seconds ' + btn.getPickerValue().periodDetails.millisecondsCount + ' milliseconds' ); } } }, '->', { xtype: 'button', text: 'Get Picker Data', handler: function(btn) { console.log(btn.prev('daterangepicker').getPickerValue()); } }, 'Ext Version is: ' + Ext.getVersion().version ] } ); } } }); //app launch function end } });