PDA

View Full Version : Forcing select on datefield



MH61
27 Apr 2009, 6:16 AM
I've implemented the date reange v-type in my application, used as follows:



xtype: 'datefield',
id: 'planStartDt',
format: 'Y-m-d',
fieldLabel: 'Start Date',
dataIndex: 'PlanningPhaseStartDate',
allowBlank: true,
vtype: 'daterange',
endDateField: 'planEndDt'// id of the end date field


Only problem is that the user can still manually enter a start date that is after the end date and the validator doesn't pick it up. Is it possible to disable text entry on the date field so that the user must use the date picker?

slemmon
27 Apr 2009, 6:25 AM
I didn't see anything in the API that looked like it would allow you to force the use of the datePicker only, but I did see "maxDate" as a config object. Might that work to keep the user from entering a start date after the end date specified?

Condor
27 Apr 2009, 6:29 AM
1. The validator should pick up this change on blur of the field (but there is a bug in Ext if you using a locale file; fix here (http://www.extjs.com/forum/showthread.php?p=281130#post281130)).
2. You could try editable:false (it's been added recently, so it could be that it isn't supported in Ext 2.2.1 yet).

MH61
27 Apr 2009, 6:38 AM
I've swapped between two validators i have found in old threads on this forum:




daterange : function(val, field) {
var date = field.parseDate(val);
if(!date){
return;
}
if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
var start = Ext.getCmp(field.startDateField);
start.setMaxValue(date);
start.validate();
this.dateRangeMax = date;
}
else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
var end = Ext.getCmp(field.endDateField);
end.setMinValue(date);
end.validate();
this.dateRangeMin = date;
}
/*
* Always return true since we're only using this vtype to set the
* min/max allowed values (these are tested for after the vtype test)
*/
return true;
}


this code caused a few problems... it was fine if i only had one set of date fields, but my panel uses 5, as soon as i introudced a second set of start and end date fields i'd get a 'too many recursions' error. so i swithed the code to the following:



var date = field.parseDate(val), otherFieldProp, dateProp, other;

if (field.startDateField) {
otherFieldProp = 'startDateField';
dateProp = 'max';
}
elseif (field.endDateField) {
otherFieldProp = 'endDateField';
dateProp = 'min';
}

if (otherFieldProp && field[otherFieldProp]) {
other = field[otherFieldProp];
if (typeof other == 'string'){
other = field[otherFieldProp] = field.ownerCt.getComponent(other) || Ext.getCmp(other);
}
if (!other[dateProp + 'OldValue'] || other[dateProp + 'OldValue'] != (date?date.getTime():undefined)) {
other[dateProp + 'Value'] = date;
if (other.menu && other.menu.picker) {
other.menu.picker[dateProp + 'Date'] = date;
other.menu.picker.update(other.menu.picker.activeDate, true);
}
other[dateProp + 'OldValue'] = date ? date.getTime() : undefined;
}
}

returntrue;
}


I see that the first validator sets the Max and Min dates - which would catch any error in manual user entry. so maybe i could write one that is a combination of the two validators? or was i doing something wrong with my implementation of the first validator?


thanks

MH61
27 Apr 2009, 6:49 AM
1. The validator should pick up this change on blur of the field (but there is a bug in Ext if you using a locale file; fix here (http://www.extjs.com/forum/showthread.php?p=281130#post281130)).
2. You could try editable:false (it's been added recently, so it could be that it isn't supported in Ext 2.2.1 yet).

1. I don't really understand what you mean
2. Setting editable false doesn't seem to do anything so i'd assume its not supported in 2.2.1

thanks

MH61
27 Apr 2009, 6:57 AM
somethign else i've notioced... previously on my page the save button would automatically disable if any fields were invalid, i.e. a allowBlank:false is empty, but now i do get the squiggly red line but i can still click save. so this could play a part in why these invalid dates can be saved. is there something i need to do to reactivate this feature on my button (though it appeared to be automatic before as i never did anything to set this up).

also, just wondering if i can set up a watermark/mask on the date field so that if the user does choose to manually type it in they can only enter it in yyyy-mm-dd format. and it will initially appear as something like xxxx-xx-xx.

thanks

Condor
27 Apr 2009, 7:04 AM
Did you set monitorValid:true in the form config and formBind:true in the button config (only works if the button is in the buttons array of the form!).

Alternatively you could set monitorValid:true and write a clientvalidation event handler that calls setDisabled(!valid) on the button.

MH61
27 Apr 2009, 8:44 AM
I was missing the monitorValid:true. it appears to work now. thanks :)