Date range picker for extjs?

Question

Is there a good date-range picker for ExtJs?

Something like this: http://www.daterangepicker.com/?

Answer 1

I whipped this up in about 2 hours, so I'm sure there are some lingering bugs and things left to be desired, but it at least gets you started with a custom date range component. Here's my Fiddle. And the code:

Ext.define('DatePickerEnhanced', {
    extend: 'Ext.picker.Date',
    alias: 'widget.datePickerEnhanced',

    config: {
        startDate: null,
        endDate: null
    },

    isDateRange: true,
    isDragging: false,

    initComponent: function () {
        this.callParent()
        this.on({
            mouseover: {
                element: 'el',
                fn: 'onMouseOverEnhanced',
                delegate: 'td.x-datepicker-cell',
                scope: this
            }
        });
    },

    handleDateClick: function (e, t) {
        this.callParent(arguments)
        if (this.isDateRange) {
            if (this.isDragging) {
                this.isDragging = false;
                var startCell = this.getCellByValue(this.startCell)
                if (startCell) {
                    Ext.get(startCell).addCls(this.selectedCls)
                }
                this.setEndDate(new Date(this.getCellDateValue(this.activeCell)))
                this.updateDateRange(this.startCell, this.endCell);
            } else {
                this.setStartDate(new Date(this.getCellDateValue(this.activeCell)))
                this.isDragging = true;
                this.updateDateRange(this.getCellDateValue(), -1);
            }
        }
    },

    getCellByValue: function (value) {
        var cells = this.cells.elements;
        for (var i = 0; i < cells.length; i++) {
            var cell = cells[i]
            if (cell.firstChild.dateValue === value) {
                return cell;
            }
        }
    },

    onMouseOverEnhanced: function (e, target, eOpts) {
        if (this.isDragging) {
            this.updateDateRange(this.getCellDateValue(), this.getCellDateValue(target));
        }
    },

    updateDateRange: function (startValue, endValue) {
        var cells = this.cells.elements;
        var selectedCls = this.selectedCls;
        for (var i = 0; i < cells.length; i++) {
            var cell = Ext.fly(cells[i])
            var dateValue = this.getCellDateValue(cells[i]);
            if (dateValue !== startValue && (dateValue < startValue || dateValue > endValue)) {
                cell.removeCls(selectedCls)
            } else {
                cell.addCls(selectedCls)
            }
        }
    },

    getCellDateValue: function (cell) {
        return cell && cell.firstChild.dateValue || this.startCell;
    },

    getDateRange: function () {
        return {
            start: this.getStartDate(),
            end: this.getEndDate()
        }
    },

    /**
     * Update the contents of the picker for a new month
     * @private
     * @param {Date} date The new date
     */
    fullUpdate: function (date) {
        var me = this;
        me.callParent(arguments);
        Ext.asap(function () {
            if (me.isDateRange && me.endCell) {
                me.updateDateRange(me.startCell, me.endCell)
            }
        })
    },

    updateStartDate: function (value) {
        this.startCell = value.getTime()
        this.publishState('startDate', value);
    },

    updateEndDate: function (value) {
        this.endCell = value.getTime()
        this.publishState('endDate', value);
    }
});

Ext.create('Ext.container.Viewport', {
    viewModel: {
        data: {
            theStart: Ext.Date.add(new Date(), Ext.Date.DAY, 2),
            theEnd: Ext.Date.add(new Date(), Ext.Date.DAY, 5)
        }
    },
    items: [{
        xtype: 'datePickerEnhanced',
        minDate: new Date(),
        bind: {
            startDate: '{theStart}',
            endDate: '{theEnd}'
        }
    }, {
        xtype: 'displayfield',
        fieldLabel: 'Start',
        bind: {
            value: '{theStart:date("m/d/Y")}'
        }
    }, {
        xtype: 'displayfield',
        fieldLabel: 'End',
        bind: {
            value: '{theEnd:date("m/d/Y")}'
        }
    }]
});