extjs4 设置第一个datefield值小于第二个

最新推荐文章于 2018-06-07 09:39:39 发布

转载最新推荐文章于 2018-06-07 09:39:39 发布 · 128 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/yexingqianli/blog/171068

文章标签：

#python

本文介绍如何使用ExtJS设置两个日期控件的值，并确保第一个日期控件的值小于等于今天，第二个日期控件的值大于第一个控件且不大于今天。默认情况下，第一个控件显示昨天的日期，第二个控件显示今天的日期。

2019独角兽企业重金招聘Python工程师标准>>>

实现功能：
1.第一个日期控件的值小于等于今天；
2.第二个日期控件的值范围：大于第一个datefield的值并不大于当天。
默认值：
第一个控件值为昨天，第二个控件值为今天。两个datefield的值均不得大于今天。

代码如下：

           {
            xtype: 'datefield',
            id: 'sdate',
            width: 220,
            fieldLabel: '开始时间',
            labelWidth: 100,
            labelAlign: 'right',
            emptyText: '请选择日期',
            format: 'Y-m-d',
            maxValue: new Date(),
            value: Ext.Date.add(new Date(), Ext.Date.DAY, -2),
            listeners: {
                'select': function () {
                    var start = Ext.getCmp('sdate').getValue();
                    Ext.getCmp('edate').setMinValue(start);
                    var endDate = Ext.getCmp('edate').getValue();
                    if (start > endDate) {
                        Ext.getCmp('edate').setValue(start);
                    }
                }
            }
        }, {
            xtype: 'datefield',
            id: 'edate',
            width: 175,
            labelWidth: 60,
            fieldLabel: '结束时间',
            labelAlign: 'right',
            emptyText: '请选择日期',
            format: 'Y-m-d',
            maxValue: new Date(),
            value: Ext.Date.add(new Date(), Ext.Date.DAY, -1),
            listeners: {
                select: function () {
                    var start = Ext.getCmp('sdate').getValue();
                    var endDate = Ext.getCmp('edate').getValue();
                    if (start > endDate) {
                        Ext.getCmp('sdate').setValue(endDate);
                    }
                }
            }
        }

效果图如下：