ExtJs内的Ext.form.Panel中datefield控件选择日期过后的事件监听select以及比较两个时间的大小

时间:2022-03-17 18:44:51

需求

那就是用于比较两个时间大小

1.选择日期后触发事件的方法

{
    xtype: 'datefield',
    name: 'birthday',
    format: 'Y-m-d',
    hideTrigger: true, //隐藏文本框后面的图标
    fieldLabel: '出生年月',
    listeners: {
    //添加日期选择事件
    "select": function () {
    alert("你选择了日期~!");
},

2.案例效果

ExtJs内的Ext.form.Panel中datefield控件选择日期过后的事件监听select以及比较两个时间的大小

3.代码

 var applyTime = Ext.create("Ext.form.Panel",{
            width:"100%",
            height:30,
            border:0,
            layout : {
                type : 'table',
                columns : '2'
            },
            items:[
                {
                    xtype: 'datefield',
                    id:"applyStartDate",
                    labelWidth: 65,
                    fieldLabel: '调度日期',
                    // style:"margin-left:20px;",
                    format: 'Y-m-d',
                    width:250
                },
                {
                    xtype: 'datefield',
                    id:"applyEndDate",
                    width:300,
                    labelSeparator :'',
                    labelWidth: 110,
                    fieldLabel: '——————— ',
                    style:"margin-left:20px;",
                    format: 'Y-m-d',
                    listeners:{
                        "select": function () {
                            var applyStartDate = Ext.getCmp('applyStartDate').rawValue;
                            if(applyStartDate){
                                applyStartDate=applyStartDate.split("-");
                                var applyStartDateValue = 
                                parseInt(applyStartDate[0]+applyStartDate[1]+applyStartDate[2]);
                            }
                            var applyEndDate = Ext.getCmp('applyEndDate').rawValue;
                            if(applyEndDate){
                                applyEndDate=applyEndDate.split("-");
                                var applyEndDateValue =                                
                               parseInt(applyEndDate[0]+applyEndDate[1]+applyEndDate[2]);
                            }
                            if(applyStartDate==""){
                                Ext.Msg.alert("提示","请先输入初始日期");
                                Ext.getCmp('applyEndDate').reset( );

                            }
                            if(applyEndDateValue-applyStartDateValue<0){
                                Ext.Msg.alert("提示","输入的结束日期日期有误");
                                Ext.getCmp('applyEndDate').reset( );
                            }
                        }
                    }

                }
            ]
        });