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

最新推荐文章于 2024-09-10 18:16:55 发布

原创最新推荐文章于 2024-09-10 18:16:55 发布 · 3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#extjs

ExtJs 专栏收录该内容

28 篇文章

订阅专栏

本文介绍如何使用ExtJS实现日期字段的选择与验证功能，通过监听日期选择事件来确保用户输入的有效性，避免出现开始日期晚于结束日期的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

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

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

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

2.案例效果

这里写图片描述

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( );
                            }
                        }
                    }

                }
            ]
        });