PDA

View Full Version : [SOLVED] Dynamically change range of valid dates in a DateField



laluigino
22 Nov 2007, 4:11 AM
Hi,

I have an EditorGrid which has 2 columns Start date / End date:


colModel = new Ext.grid.ColumnModel([
{
header: "Start",
width: 100,
sortable: false,
locked: false,
resizable: true,
dataIndex: 'start_date',
renderer: Ext.util.Format.dateRenderer('d/m/Y'),
editor: new Ext.form.DateField({
allowBlank: false,
format: 'd/m/Y',
minValue: new Date()
})
},{
header: "End",
width: 100,
sortable: false,
locked: false,
resizable: true,
dataIndex: 'end_date',
renderer: Ext.util.Format.dateRenderer('d/m/Y'),
editor: new Ext.form.DateField({
allowBlank: false,
format: 'd/m/Y',
minValue: new Date()
})
}
]);


Is there a way to force the 'End Date' DateField to validate only the days following the current value in the 'Start Date' field?

By now I only force the user to edit the 'End Date' after the 'Start Date' has been modified with a value greater than the current value in the 'End Date', this way:



function handleEdit(editEvent) {
var gridField = editEvent.field;
var g = editEvent.grid;
var r = editEvent.row;
var d = editEvent.record.data;
var dm = g.store, cm = g.colModel;
if (gridField == 'start_date') {
var ce = cm.getCellEditor(r, 1);
// HERE I'D LIKE TO MODIFY THE EDITOR'S VALID RANGE
//ce.minValue = editEvent.value;
}
if (d['start_date'] > d['end_date']) {
g.startEditing(r, 1); // EDIT THE END DATE TO A NEW VALID VALUE
} else {
dm.sort(cm.getDataIndex(1), 'asc'); // FORCE SORTING BY START DATE
}
};

grid.on('afteredit', handleEdit);


Any idea?

Thank you in advance!

laluigino
22 Nov 2007, 7:22 AM
Hi,
by now I solved this problem with a little workaround:



function handleBeforeEdit(beforeEditEvent) {
var gridField = beforeEditEvent.field;
if (gridField == 'end_date') {
var g = beforeEditEvent.grid;
var r = beforeEditEvent.row;
var d = beforeEditEvent.record.data;
var cm = g.colModel;
var ce = cm.getCellEditor(1, r);
ce.field.minValue = d['start_date'];
ce.field.startValue = d['start_date'];
}
};

function handleAfterEdit(afterEditEvent) {
var gridField = afterEditEvent.field;
var g = afterEditEvent.grid;
var r = afterEditEvent.row;
var d = afterEditEvent.record.data;
var dm = g.store, cm = g.colModel;
if (gridField == 'start_date') {
var ce = cm.getCellEditor(1, r); //THIS WAS WRONG IN THE PREVIOUS POST
ce.field.minValue = afterEditEvent.value;
ce.field.startValue = afterEditEvent.value;
}
if (d['start_date'] > d['end_date']) {
g.startEditing(r, 1);
} else {
dm.sort(cm.getDataIndex(1), 'asc');
}
};

grid.on('beforeedit', handleBeforeEdit);
grid.on('afteredit', handleAfterEdit);


This simply set the minValue of the editor any time the 'End Date' DateField is displayed to the value currently set in the 'Start Date' field.

It's still missing something that set the 'End Date' value to a valid value (actually a user can leave a wrong starting value), but I hope that this will be useful anyway.