EXTJS date field validation

Question

In the EXTJS, I have a DateField. User entered 'abcd' to that field, if I getValue, it will return an empty string, not the 'abcd'.

how can I force user to enter correct value for a dateField ? or how can I get the real input in that filed ?

Thanks.

Answer 1

The datefield has also has a getRawValue method which is different from getValue because it does not apply any of the validation that getValue does.

To force a user to enter a correct value, you can use the reMask property. The default validation logic will allow invalid entry and will show that the entry is invalid with the red highlighting and such. The reMask masks filters keyboard input. In this example it restricts to numbers and forward slash and could be extended to any date format needed.

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 300,
    bodyPadding: 10,
    title: 'Dates',
    items: [{
        xtype: 'datefield',
        anchor: '100%',
        fieldLabel: 'From',
        emptyText: 'mm/dd/yyyy',
        maskRe: /[0-9\/]/,
        name: 'from_date',
        maxValue: new Date()  // limited to the current date or prior
    }, {
        xtype: 'datefield',
        anchor: '100%',
        emptyText: 'mm/dd/yyyy',
        maskRe: /[0-9\/]/,
        fieldLabel: 'To',
        name: 'to_date',
        value: new Date()  // defaults to today
    }]
});?

Answer 2

When you use getValue method in a dateField the return will be: Wed Jul 25 2012 00:00:00 GMT-0300 (BRT) , for example, but you can format the date using, Ext.util.Format.date(date, 'd/m/YH:i:s'); and the return will be "25/07/2012 00:00:00" .