Odd parsing / formatting of columns with type date

[Mercury]

Dear Bryntum team,

I am having trouble with dates in my grid. Please have a look at the result below.
For testing purposes I set up the most basic implementation of your grid (without any locales) and retrieve the dates in ISO8601format. When just setting the column type to "date" the displayed dates do not make sense any more. To my surprise using a certain "format" only works in some cases.

Any idea what is causing this display (/parsing?) issue?
Many thanks in advance for your help.

[saki]

Would you please provide us your columns configuration and json with data? We'll investigate.

[Mercury]

Sure thing, but don't expect anything fancy.
Thank you for your assistance.

Json data:

[
    {
        "date": "2021-06-09T06:37:22.617"
    },
    {
        "date": "2019-12-31T00:00:00"
    },
    {
        "date": "2020-01-02T13:37:59"
    }
]

Grid incl. column config:

let grid = new bryntum.grid.Grid({
                        appendTo: 'testrange',
                        columns: [
                            { field: 'date', text: 'Date (raw)' },
                            { field: 'date', text: 'Date (type:date)', type: 'date' },
                            { field: 'date', text: 'Date (type:date && format:DD.MM.YYYY)', type: 'date', format: 'DD.MM.YYYY' },
                            { field: 'date', text: 'Date (type:date && format:YYYY-MM-DD)', type: 'date', format: 'YYYY-MM-DD' }
                        ],
                        data: foo
                    });

[pmiklashevich]

Please look at your data in the store:

grid.store.map(r => r.date)
// (3) ["2021-06-09T06:37:22.617", "2019-12-31T00:00:00", "2020-01-02T13:37:59"]

They are strings. The store uses a default model which doesn't know that your data field called "date" holds the dates. You need to define store fields, or define a new Model and set to the Store as modelClass.

    store : {
        fields : [
            { name : 'date', type : 'date' }
        ],
        data : [
            {
                date : '2021-06-09T06:37:22.617'
            },
            {
                date : '2019-12-31T00:00:00'
            },
            {
                date : '2020-01-02T13:37:59'
            }
        ]
    }

Try now:

grid.store.map(r => r.date)
// (3) [Wed Jun 09 2021 06:37:22 GMT+0300 (GMT+03:00), Tue Dec 31 2019 00:00:00 GMT+0300 (GMT+03:00), Thu Jan 02 2020 13:37:59 GMT+0300 (GMT+03:00)]

Or alternative solution:

import Model from '../../lib/Core/data/Model.js';
import '../../lib/Grid/column/DateColumn.js';

class MyModel extends Model {
    static get $name() {
        return 'MyModel';
    }

static get fields() {
    return [
        { name : 'date', type : 'date' }
    ];
}
}

.....
    store : {
        modelClass : MyModel,
        data       : [
            {
                date : '2021-06-09T06:37:22.617'
            },
            {
                date : '2019-12-31T00:00:00'
            },
            {
                date : '2020-01-02T13:37:59'
            }
        ]
    }

Run in console:

grid.store.first
// MyModelEx {…}

[Mercury]

Hi Pavel,
thanks for clearing this up. Makes sense for me now. I expected the "type: 'date'" attribute in the column definition to do more than just allow for formatting (e.g. parsing the date-string). But your approach with field definitions in the store works for me.
Cheers!