PDA

View Full Version : daterange is giving error for start date and end date



poojagarg89
1 Nov 2011, 10:00 PM
I have two fields Start Date and End Date where I have referred the example giving in sencha for advanced validation for start date and end date



Ext.apply(Ext.form.field.VTypes, {
daterange: function(val, field) {
var date = field.parseDate(val);

if (!date) {
return false;
}
if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
var start = field.up('form').down('#' + field.startDateField);
start.setMaxValue(date);
start.validate();
this.dateRangeMax = date;
}
else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
var end = field.up('form').down('#' + field.endDateField);
end.setMinValue(date);
end.validate();
this.dateRangeMin = date;
}

return true;
},

daterangeText: 'Start date must be less than end date'
});


and the fields where I have used this daterange is :


items:[{

id: 'start_date',
xtype: 'datefield',
fieldLabel: 'Start Date',
name: 'start_date',
vtype: 'daterange',
startDateField: 'start_date',
allowBlank: 'false',
blankText:"This field is required",
msgTarget: 'under'

//value: start_date
},{
id: 'end_date',
xtype: 'datefield',
fieldLabel: 'End Date',
name: 'end_date',
allowBlank: 'false',
blankText:"This field is required",
msgTarget: 'under',
vtype: 'daterange',
endDateField: 'end_date',
margins: '0 0 0 10'
//value: end_date
}]


It is giving error in Mozilla Firefox :

Warning: Unresponsive Script
A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.

Script: resource://firebug_rjs/lib/object.js:19


this error make my mozilla firfeox hanged and I need to restart the browser again

mitchellsimoens
2 Nov 2011, 6:14 AM
Your VType is looking for the startDateField and endDateField property on the field that is being validated so you need to define both those properties on both fields. In your code, if the start date field is being validated, there is no endDateField property on that field so ComponentQuery is not able to find it and I bet that is why you are getting this error.

Further more, I wouldn't use id to find the other field. I would set a different property...


items:[{
xtype: 'datefield',
fieldLabel: 'Start Date',
name: 'start_date',
vtype: 'daterange',
vfield: 'start_date',
allowBlank: 'false',
blankText:"This field is required",
msgTarget: 'under'
},{
xtype: 'datefield',
fieldLabel: 'End Date',
name: 'end_date',
allowBlank: 'false',
blankText:"This field is required",
msgTarget: 'under',
vtype: 'daterange',
vfield: 'end_date',
margins: '0 0 0 10'
}]

And now you can use ComponentQuery to find the field with property vfield:


Ext.apply(Ext.form.field.VTypes, {
daterange: function(val, field) {
var date = field.parseDate(val);

if (!date) {
return false;
}
if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
var start = field.up('form').down('datefield[vfield=start_date');
start.setMaxValue(date);
start.validate();
this.dateRangeMax = date;
}
else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
var end = field.up('form').down('datefield[vfield=end_date');
end.setMinValue(date);
end.validate();
this.dateRangeMin = date;
}

return true;
},

daterangeText: 'Start date must be less than end date'
});

Now you are not susceptible to id collisions.

poojagarg89
2 Nov 2011, 8:27 PM
hey thanx for the solution as it worked.................................! :)

rainmaker
7 Jun 2012, 12:33 PM
I am trying to do the same thing and I have followed what was discussed here. However, each time I do the validate (start.validate() or end.validate()) inside daterange()), it executes datarange so I get into an endless loop.

poojagarg89
7 Jun 2012, 10:18 PM
hey try this

VType:


Ext.apply(Ext.form.field.VTypes, {
daterange: function(val, field) {
var date = field.parseDate(val);

if (!date) {
return false;
}
if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
var start = field.up('form').down('#' + field.startDateField);
start.setMaxValue(date);
start.validate();
this.dateRangeMax = date;
}
else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
var end = field.up('form').down('#' + field.endDateField);
end.setMinValue(date);
end.validate();
this.dateRangeMin = date;
}

return true;
},

daterangeText: 'Start date must be less than end date'
});





n use it like this :


id: 'start_date',
xtype: 'datefield',
fieldLabel: '<font color="red"> * </font>Start Date',
name: 'start_date',
enableKeyEvents: true,
vtype: 'daterange',
endDateField: 'end_date',
allowBlank: false,
blankText:"This field is required",
msgTarget: 'under'
//value: start_date
},{
//flex:1,
id: 'time_start',
xtype: 'timefield',
name: 'time_start',
width:120,
allowBlank: false,
blankText:"This field is required",
msgTarget: 'under',
//allowBlank: false,
margins: '0 0 0 10'


Thanks n Regards,
Pooja