Ext.js2.1でのFormTo日付フィールド単品の設置

htmlに

< div id="fromdate">< / div >
< div id="todate">< / div >

を書いて、以下のjavascriptを

Ext.apply(Ext.form.VTypes, {
daterange: function(val, field) {
var date = field.parseDate(val);
var dispUpd = function(picker) {
var ad = picker.activeDate;
picker.activeDate = null;
picker.update(ad);
};

if (field.startDateField) {
var sd = Ext.getCmp(field.startDateField);
sd.maxValue = date;
if (sd.menu && sd.menu.picker) {
sd.menu.picker.maxDate = date;
dispUpd(sd.menu.picker);
}
} else if (field.endDateField) {
var ed = Ext.getCmp(field.endDateField);
ed.minValue = date;
if (ed.menu && ed.menu.picker) {
ed.menu.picker.minDate = date;
dispUpd(ed.menu.picker);
}
}
return true;
}
});

Ext.onReady(function(){
Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side';
var fromdate = new Ext.form.DateField({
name: 'startdt',
id: 'startdt',
format: 'Y/m/d',
value: '2008/07/01',
vtype: 'daterange',
endDateField: 'enddt', // id of the end date field
disabledDaysText: '選択してください'
});
var todate = new Ext.form.DateField({
name: 'enddt',
id: 'enddt',
format: 'Y/m/d',
vtype: 'daterange',
value: '2008/07/31',
startDateField: 'startdt', // id of the start date field
disabledDaysText: '選択してください'
});

fromdate.render('fromdate');
todate.render('todate');
});