验证extjs中的日期文本框输入

时间:2013-08-13 11:48:33

标签: validation extjs

我有一个下拉列表。当我从下拉列表中选择日期选项时,文本框用户输入应该只有mm / dd / yyy的形式。 如果有的话,然后发出警报。 关于在分机中实现相同的任何建议。

3 个答案:

答案 0 :(得分:2)

亚洲时报Siddharth,

请看看这个。您可以根据您的框架优化此代码。我刚才为你的问题做了一个例子:

var dateVar = {
        xtype     : 'datefield',
        name      : 'name',
        fieldLabel: 'Date',
        emptyText: 'mm/dd/yyyy',
        altFormats: 'm/d/Y',
        submitFormat: 'm/d/Y',
        format: 'm/d/Y',
        listeners: {
            blur: function(field) {
                if( ! field.isValid()) {
                    alert('Date is invalid!');
                }
            }
        }
    };
Ext.create('Ext.form.Panel',{
    id : 'editTask',
    renderTo : Ext.getBody(),
    items : [{
        xtype : 'combo',
        name : "type",
        fieldLabel : 'Type',
        store : ['DATE', 'NUMBER', 'TEXT'],
        width : 500,
        emptyText : "Select..",
        listeners : {
            change : selectionChanged
        }
    }, { 
        xtype: 'fieldcontainer',
        id :  'datefiledContainer',
    }]
});

function selectionChanged(combo){
    var dateVarCont = Ext.getCmp("datefiledContainer");
        dateVarCont.removeAll();
    if(combo.value == "DATE"){
        dateVarCont.add([dateVar]);
    }else{
        var field = {
            xtype : combo.value.toLowerCase() + "field",
            name : combo.value,
            fieldLabel : combo.value,
            width : 500
        }
        dateVarCont.add([field]);
    }

};

您可以在以下链接中找到工作示例:

http://jsfiddle.net/narendrakurapati/gDJYw/5/

谢谢,

南都

答案 1 :(得分:1)

Ext.create('Ext.form.field.Date', {
    name      : 'name',
    fieldLabel: 'Date',
    emptyText: 'mm/dd/yyyy',
    altFormats: 'm/d/Y',
    renderTo: Ext.getBody(),
    submitFormat: 'm/d/Y',
    format: 'm/d/Y',
    listeners: {
        blur: function(field) {
            if( ! field.isValid()) {
                alert('Date is invalid!');
            }
        }
    }
});

请参阅:http://jsfiddle.net/qrbNT/

<强>但即可。我认为这是一个糟糕的方式。最好允许用户以方便的格式输入日期,同时服务器以正确的格式发送。使用“altFormats”&amp; “submitFormat”属性:

...
altFormats: 'U|d-m-Y|d.m.Y|d/m/Y|d,m,Y|d-m-y|d.m.y|d/m/y|m/d/Y',
submitFormat: 'm/d/Y',
...

请参阅:http://jsfiddle.net/z8VUH/1/

答案 2 :(得分:1)

在文本框中添加验证器,如下所示:

validator: function(value){
    if((Ext.Date.parse(value, "m/d/Y") && theComboBox.getValue() == "DATE_INPUT")
        || theComboBox.getValue() != "DATE_INPUT")
        return true;
    return "Date is not in the format mm/dd/yyyy";
}

您需要引用用户从中选择输入格式的comboboxDATE_INPUT可能不是您的实际值。