一个extjs 中两个datefield 值的比较

Question

extjs 页面中
页面中有两个日期的选择框
第一个是起始日期 第二个是结束日期，我想做这样的限制，在选择第二个结束日期的时候能够做个限制，即要大于开始日期 用对话框提示。最好的二个选择框还保留显示。Ext.onReady(function(){
var _window=new Ext.Window({
renderTo:Ext.getBody(),
frame:true,
plain:true,
width:500,
height:200,
layout:"form",
lableWidth:45,
defaults:{xtype:"textfield",width:180},
items:[{fieldLabel:"帐号"},{fieldLabel:"密码"},{
name:'dt1',
xtype:"datefield",
format:"Y-m-d",
fieldLabel:"起始日期"
},{
name:'dt2',
xtype:"datefield",
format:"Y-m-d",
fieldLabel:"结束日期"
}],

buttons:[{text:"确定"},{text:"取消",handler:function(){_window.hide();}}]

})

_window.show();
}) 

Answer 1

function ckDate(){
var v1 = Ext.getCmp("dt1").getValue();
var v2 = Ext.getCmp("dt2").getValue();
if(v1=="" || v2=="") return true;
return v2 > v1;
}
Ext.onReady(function(){
var _window=new Ext.Window({
renderTo:Ext.getBody(),
frame:true,
plain:true,
width:500,
height:200,
layout:"form",
lableWidth:45,
monitorValid:true,
defaults:{xtype:"textfield",msgTarget:'side',allowBlank:false,width:180},
items:[{fieldLabel:"帐号"},{fieldLabel:"密码"},{
name:'dt1',id:'dt1',
xtype:"datefield",
format:"Y-m-d",
fieldLabel:"起始日期",validator:ckDate
},{
name:'dt2',id:'dt2',
xtype:"datefield",
format:"Y-m-d",
fieldLabel:"结束日期",validator:ckDate
}],
buttons:[{text:"确定"},{text:"取消",handler:function(){_window.hide();}}]
}).show();

});

Answer 2

一楼方法很好哈，学习了。
我一般都是写个转换日期的函数，然后直接getvalue之后进行比较，用alert输出，比较笨的办法。

Answer 3

      {
                xtype:'datefield',
                vtype: 'daterange',
                name:"startDt",
                id:'startDt',
                fieldLabel:"Start Date",
                format:"Y-m-d",
                anchor:"65%",
                endDateField: 'endDt'
            },
            {
                xtype:'datefield',
                vtype: 'daterange',
                name:"endDt",
                id:'endDt',
                fieldLabel:"End Date",
                format:"Y-m-d",
                anchor:"65%",
                startDateField: 'startDt'
            }
Ext.apply(Ext.form.VTypes, {
        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;
            }
            return true;
        }
    });