extjs的日期范围选择器？

ExtJs有好的日期范围选择器吗

像这样的：

---

我在大约2个小时内完成了这项工作，因此我确信还有一些遗留的bug和需要改进的地方，但它至少可以让您从自定义日期范围组件开始。这是我的。以及守则：

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")}'
        }
    }]
});

Ext.define（'DatePickerEnhanced'{
扩展：“Ext.picker.Date”，
别名：“widget.datePickerEnhanced”，
配置：{
startDate:null，
结束日期：空
},
是的，
IsDraging:错，
initComponent:函数（）{
this.callParent（）
这是我的({
鼠标悬停：{
元素：“el”，
fn:“过度强化”，
代表：“td.x-datepicker-cell”，
范围：本
}
});
},
HandleDate点击：功能（e，t）{
this.callParent（参数）
if（this.isDaterRange）{
如果（这是我的错）{
this.isDraging=false；
var startCell=this.getCellByValue（this.startCell）
如果（startCell）{
Ext.get（startCell）.addCls（this.selectedCls）
}
this.setEndDate（新日期（this.getCellDateValue（this.activeCell）））
this.updateDataRange（this.startCell，this.endCell）；
}否则{
this.setStartDate（新日期（this.getCellDateValue（this.activeCell）））
this.isDraging=true；
this.updateDataRange（this.getCellDateValue（），-1）；
}
}
},
getCellByValue:函数（值）{
var cells=this.cells.elements；
对于（变量i=0；iendValue））{
cell.removeCls（selectedCls）
}否则{
cell.addCls（selectedCls）
}
}
},
getCellDateValue:函数（单元格）{
返回单元格&&cell.firstChild.dateValue | this.startCell；
},
getDateRange:函数（）{
返回{
开始：this.getStartDate（），
结束：this.getEndDate（）
}
},
/**
*更新新月份选择器的内容
*@私人
*@param{Date}Date新日期
*/
完整更新：功能（日期）{
var me=这个；
me.callParent（参数）；
Ext.asap（函数（）{
if（me.isDaterRange&&me.endCell）{
me.updateDataRange（me.startCell、me.endCell）
}
})
},
updateStartDate:函数（值）{
this.startCell=value.getTime（）
此.publishState（'startDate'，值）；
},
updateEndDate:函数（值）{
this.endCell=value.getTime（）
此.publishState（'endDate'，值）；
}
});
Ext.create（'Ext.container.Viewport'{
视图模型：{
数据：{
开始：Ext.Date.add（新日期（），Ext.Date.DAY，2），
结束：Ext.Date.add（新日期（），Ext.Date.DAY，5）
}
},
项目：[{
xtype:'datePickerEnhanced'，
minDate:新日期（），
绑定：{
起始日期：“{theStart}”，
结束日期：“{theEnd}”
}
}, {
xtype:'displayfield'，
fieldLabel:“开始”，
绑定：{
值：“{theStart:date（“m/d/Y”）}”
}
}, {
xtype:'displayfield'，
fieldLabel:'结束'，
绑定：{
值：“{theEnd:date（“m/d/Y”）}”
}
}]
});

它对您有用吗？伟大的看起来很棒！非常感谢。当我谈到实现时，我会看一看并发布一个更新。