Date range picker for extjs? - 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")}'
}
}]
});