extjs的日期范围选择器？

问题描述

ExtJ是否有很好的日期范围选择器？

是这样的：http://www.daterangepicker.com/？

解决方法

我在大约2个小时内就完成了此操作，因此我确定还有一些挥之不去的bug和尚待解决的问题，但这至少可以帮助您开始使用自定义日期范围组件。这是我的Fiddle。和代码：

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(),5)
        }
    },items: [{
        xtype: 'datePickerEnhanced',minDate: new Date(),bind: {
            startDate: '{theStart}',endDate: '{theEnd}'
        }
    },{
        xtype: 'displayfield',fieldLabel: 'Start',bind: {
            value: '{theStart:date("m/d/Y")}'
        }
    },fieldLabel: 'End',bind: {
            value: '{theEnd:date("m/d/Y")}'
        }
    }]
});