ExtJS : Submit Date in Separate Format

3
votes

I'm using ExtJS v4.0.

Maintaining date format between client and server side is really confusing.

Users want their own input formats, but the server usually requires the submission to be one standard format.

It should be a built in implementation in ExtJS but it's not.

I have read some solutions regarding to this issue but they only try to solve DateField formatting (by creating special DateField plugin or extending SubmitAction).

I'm looking for a global solution to format all dates which can be submitted (grid/store writer, form/datefield, etc).

So, dates may have custom display format according to locale but they will be submitted in one standard format (e.g. yyyy-mm-dd).

Any suggestion for this problem?

Thank you very much.

2
extjsextjs4

2 Answers

1
votes

This was the only working answer that I found from documentation using version 4.2.1

    Ext.Date.patterns = {
    ISO8601Long:"Y-m-d H:i:s",
    ISO8601Short:"Y-m-d",
    ShortDate: "n/j/Y",
    LongDate: "l, F d, Y",
    FullDateTime: "l, F d, Y g:i:s A",
    MonthDay: "F d",
    ShortTime: "g:i A",
    LongTime: "g:i:s A",
    SortableDateTime: "Y-m-d\\TH:i:s",
    UniversalSortableDateTime: "Y-m-d H:i:sO",
    YearMonth: "F, Y"
};


//allow max date as today
Ext.override(Ext.form.DateField, {
    submitFormat:Ext.Date.patterns.ISO8601Short
});
0
votes

I don't know any universal, implement once in your code, kind of solution to this. But you could write a function that would iterate through a patterns object. Kind of like it talks about at the end of the Ext.Date object intro in the docs. You would definitely have to add more patterns and you have to implement it individually where you wanted it, e.g.: For a store writer you could use it in the beforesync event but for a datefield you would put it as a validator function. I used a function like this in different places so that users wouldn't be tied to a specific date pattern, the function:

function reallyParse(aDate) {
    Ext.Array.each(Ext.Date.patterns, function(pattern) {
        aDate = Ext.Date.parse(aDate, pattern)
        return aDate === null;
    });
    if (myDate !== null) {
        return false
    } else {
        // format it the way your server wants it
        return Ext.Date.format(myDate, Ext.Date.patterns.ISO8601Long)
    }
}

The specific quote from the docs I am talking about is this:

Here are some standard date/time patterns that you might find helpful. They are not part of the source of Ext.Date, but to use them you can simply copy this block of code into any script that is included after Ext.Date and they will also become globally available on the Date object. Feel free to add or remove patterns as needed in your code.

Ext.Date.patterns = {
    ISO8601Long:"Y-m-d H:i:s",
    ISO8601Short:"Y-m-d",
    ShortDate: "n/j/Y",
    LongDate: "l, F d, Y",
    FullDateTime: "l, F d, Y g:i:s A",
    MonthDay: "F d",
    ShortTime: "g:i A",
    LongTime: "g:i:s A",
    SortableDateTime: "Y-m-d\\TH:i:s",
    UniversalSortableDateTime: "Y-m-d H:i:sO",
    YearMonth: "F, Y"
};

Example usage:

var dt = new Date();
console.log(Ext.Date.format(dt, Ext.Date.patterns.ShortDate));

Developer-written, custom formats may be used by supplying both a formatting and a parsing function which perform to specialized requirements. The functions are stored in parseFunctions and formatFunctions.

Like I said, you would have to add to their patterns object and implementation would vary depending on where you're using it, but that's how I do it.