CODEWITHSUNDEEP
javascriptdatemomentjsjqxgrid
Andy Powers
Andy Powers

Reputation: 75

Format Date to show "Today"/"Tomorrow" instead of Month-Day in JqxGrid

We're using jqxgrid to show room informations on a screen. For the sake of readability we try to format the date to "today" or "tomorrow" instead of the actual date (of today or tomorrow...).

Everything works (grid is showing everything it should) except the reformatting to "today" and "tomorrow". We tried using moment.js, but somehow it won't work.

This is our source:

 datatype: "json",
        datafields: [
            {name: 'title', type: 'string'},
            {name: 'room_name', type: 'string'},
            {name: 'room_number', type: 'string'},
            {name: 'start', type: 'date', format: "yyyy-MM-dd HH:mm"},
            {name: 'end', type: 'date', format: "yyyy-MM-dd HH:mm"},
            {name: 'email', type: 'string'},
            {name: 'comment', type: 'string'}

            ...

  $("#jqxgrid").jqxGrid(
        {
        columns: [
                {text: 'Raum #', dataField: 'room_number', width: 120},
                {text: 'Raum-Name', dataField: 'room_name', width: 340},
                {text: 'Von', dataField: 'start', width: 190, cellsalign: 'center', cellclassname: "startdate"},
                {text: 'Bis', dataField: 'end', width: 190, cellsalign: 'center', cellsformat: 'dd.MM'},
                ....

Note: Output in the gridcell "VON" looks like this: Thu Aug 28 2014 16:30:00 GMT+0200 (CEST)

As you can see, the start date is wrapped in the div-class startdate.

We tried it via a javascript to reformat it:

$(document).ready(function() {
    function formatDate(date) {
        date.each(function(){
            var formattedDate = $(this).text();
            var d = moment(formattedDate);
            $(this).html( d.format("dddd, MMMM Do"));

        });
};

formatDate($('.startdate'));
});

This works perfectly when we use it on a div that's outside the jqxgrid. It does not, however, work inside it. Any ideas?

Update: This does the trick:

 window.setTimeout(function(){
            console.log($('.startdate div').innerHTML);
            formatDate($('.startdate div'));
        }, 2000);

The divs are generated later, as gp correctly stated. Anyway, might there be a better solution?

Upvotes: 0

Views: 367

Answers (2)

dfperry
dfperry

Reputation: 2258

you could add your formatting call to the grid's ready function:

$("#jqxgrid").jqxGrid(
    {
        columns: [ ... ],
        ready: function() {
            formatDate($('.startdate'));   
        },
        ....
    });

Upvotes: 2

gp.
gp.

Reputation: 8225

You need to ensure the divs (.startdate) are generated in the grid before you call formatDate.

Best would be to use the "initialized" event of the jqxgrid.

$('#jqxgrid').on('initialized', function () {
    formatDate($('.startdate div'));
});

Upvotes: 0

Related Questions