Ext.ux.button.DateRangePicker

Date range picker button for ExtJS Framework, v. 4.2.1 and up. Click, choose dates and use the instance getValue() method for getting results.

by Ventsyslav Vassilev

HTML

<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/5.1.0/build/packages/ext-theme-classic/build/resources/ext-theme-classic-all-debug.css">
<div id="demoPanelDiv"></div>
<div style="padding-left: 10px">
    <div style="padding-left: 10px">
         <h2>Date Range Picker Component for ExtJS</h2>

        <p><strong>Source at GitHub</strong>
        </p>
        <p><a href="https://github.com/wencywww/Ext.ux.button.DateRangePicker">https://github.com/wencywww/Ext.ux.button.DateRangePicker</a>
        </p>
        <p><strong>Demos</strong>
        </p>
        <p><a href="https://fiddle.sencha.com/#fiddle/10t2">Sencha's Fiddle: https://fiddle.sencha.com/#fiddle/10t2</a>
        </p>
        <p><a href="http://jsfiddle.net/mx_starter/xLvg5yj6/">JSFiddle: http://jsfiddle.net/mx_starter/xLvg5yj6/</a>
        </p>
        <p><strong>Features:</strong>
        </p>
        <ul>
            <li>Easily choose period between two dates via a single button</li>
            <li>Can be used everywhere within the app, just as a normal button
                <br>
            </li>
            <li>Optionally, include start/end times in the dates</li>
            <li>Optionally, two datefield components could be bound and automatically updated by the pickers</li>
            <li>5 preset periods available for quick set - this week, last week, this month, last month, this year</li>
            <li>Custom formats accepted for dates and times</li>
            <li>Customizable captions, icons
                <br>
            </li>
            <li>Customizable via a simple config object</li>
            <li>Returns an object containg the period details via the getValue() method</li>
            <li>Returned object also containg PRECISED period details, eg. 13 months are shown as 1 year and 1 month and so on</li>
            <li>Tested with ExtJS version 4.2.1.883 and up
                <br>
            </li>
        </ul>
        <p><strong>Component layout:</strong>
       ...

CSS

.drp-icon-yes {
    background: url("http://www.famfamfam.com/lab/icons/silk/icons/tick.png") no-repeat scroll 0 0 transparent !important;
}
.drp-icon-calendar {
    background: url("http://www.famfamfam.com/lab/icons/silk/icons/calendar.png") no-repeat scroll 0 0 transparent !important;
}

JavaScript

Ext.define('Ext.ux.button.DateRangePicker', {
    extend: 'Ext.button.Button',
    alias: 'widget.daterangepicker'

    ,
    requires: [
        'Ext.picker.Date',
        'Ext.form.field.Time'],
    menu: {
        plain: true,
        allowOtherMenus: true,
        items: [{
            xtype: 'panel',
            frame: true,
            drpItemRole: 'pickContainer',
            layout: 'hbox',
            items: [{
                xtype: 'container',
                drpItemRole: 'containerFrom',
                layout: {
                    type: 'vbox',
                    align: 'left'
                },
                items: [{
                    xtype: 'datepicker',
                    drpItemRole: 'pickFrom',
                    listeners: {
                        select: function (picker, date) {
                            this.up('daterangepicker').setRange();
                        }
                    }
                }]
            }, {
                xtype: 'container',
                drpItemRole: 'containerTo',
                layout: {
                    type: 'vbox',
                    align: 'right'
                },
                items: [{
                    xtype: 'datepicker',
                    drpItemRole: 'pickTo',
                    listeners: {
                        select: function (picker, date) {
                            this.up('daterangepicker').setRange();
                        }
                    }
                }]
            }]

            ,
            buttons: [{
                xtype: 'button',
                drpItemRole: 'drpPresetPeriodsBtn',
                menu: {
                    allowOtherMenus: true,
                    items: [{
                        hideOnClick: false,
                        drpItemRole: 'drpThisWeekPresetOption',
                        handler: function () {
                            this.up('daterangepicker').setPresetPeriod('thisWeek');
                    ...