Подтвердить ввод текстового поля даты в extjs

Question

У меня есть раскрывающийся список. Когда я выбираю параметр «Дата» из раскрывающегося списка, пользовательский ввод текстового поля должен быть только в формате мм/дд/гггг. Если что-то еще, то бросьте предупреждение. Любые предложения по достижению этого в ext js.

Answer 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" & "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/

Answer 2

Добавить валидатор в текстовое поле, как это:

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"; 
} 

Вам нужна ссылка на combobox, что пользователь выбирает формат ввода, а также DATE_INPUT, вероятно, не является вашим фактическим значением.

Answer 3

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/

спасибо,

Nandu