CODEWITHSUNDEEP
javascriptdateextjsutcrenderer
kevins
kevins

Reputation: 482

Custom Renderer in Ext-js - Bryntum/ExtJs UTC Date Issue

I'm trying to add a custom renderer to Bryntum Ext Gantt chart.

I have dates which are being shown in the local timezone, but I wish to show them in the UTC date because this is what the datasource is using to present the user with date (it's agnostic of browser time-zone) in the source application.

The post here led me in the right direction (seems to be what I need based on my tests): Why does ExtJS subtract a day when formatting a date?

How do I implement linked solution into a custom renderer?

I tried this and the column was blank: 

{
    xtype:'startdatecolumn',
    sortable: false,
    text: 'Start',
    dataIndex: 'StartDate',
    renderer: function (v, m, r) {
        return Ext.util.Format.date(Ext.Date.parse(v, "Y-m-d"), "m-d-Y");
    }
}

Also tried this and the column was blank: 

{
    xtype:'startdatecolumn',
    sortable: false,
    text: 'Start',
    dataIndex: 'StartDate',
    renderer: function (v) {
        var dt = Ext.Date.parse(v, "Y-m-d");
        Ext.util.Format.date(dt, "m-d-Y");
        return dt;
    }
}

With this format, it shows the date in local timezone (incorrect unless set to UTC). 

{   
    xtype:'enddatecolumn',
    dataIndex: 'EndDate',
    sortable: false,
    text: 'End'
}

Bryntum Column Example

 columns : [
            {
                xtype : 'treecolumn',
                header: 'Tasks',
                sortable: true,
                dataIndex: 'Name',
                width: 200,
                field: {
                    allowBlank: false
                },
                renderer : function(v, meta, r) {
                    if (!r.data.leaf) meta.tdCls = 'sch-gantt-parent-cell';

                    return v;
                }
            },
            {
                xtype : 'startdatecolumn'
            },
            {
                //hidden : true,
                xtype : 'enddatecolumn'
            },

Upvotes: 1

Views: 2361

Answers (1)

kevins
kevins

Reputation: 482

Fixed using this function: 

function niceDate (v, m, r) {
            var dt =    padStr(1 + v.getMonth()) + 
                        '-' +
                        padStr(v.getDate()) +
                        '-' +
                        padStr(v.getFullYear());
            return dt;
           }

function padStr(i) {
    return (i < 10) ? "0" + i : "" + i;
}

and in the column renderer : 

                   {
                    xtype:'startdatecolumn',
                    sortable: false,
                    text: 'Start',
                    dataIndex: 'StartDate',
                    renderer: niceDate
                    }

When parsing the xml, I use a switch function with the following for timestamps: 

case 'timestamp':
    if(!empty(v))
    v = new Date(parseInt(v));
    break;

This seems to reliably feed a "date" object to ext.js and the column is rendered to match our sources date formatting using the renderer.

Upvotes: 2

Related Questions