Formatting Dates

shannonwrege

There is a lot of discussion on this topic, but it seems to be for the older version of the software. I was hoping for something simple like the following:

columns: [
{ title: "Date",
type: "date",
dateFormat: "m/dd"
},...

But this doesn't seem to work. Should I be using the column's render attribute? I haven't had much success with this either. I'd love an example if anyone has it. I know I can always use a properly formatted string, but the sorting on the string won't be the same as a date sort.

jr42.gordon

Please take at look at my responses in this thread

shannonwrege

So is the suggestion having two columns --- one being the actual date for the sort and the other being a date formatted string? Seems like sending extra data when formatting by the client should be possible.

jr42.gordon

Depends on your preference. You could have three columns (month, day, date format) or you could have a single column and use the techniques mentioned in the thread I linked.

Whichever way you decide, the (date format) column will need a custom sort function based on your sorting rules.

shannonwrege

I ended up settling on the following:

      columns: [
          { title: "Date",
            type: "date",
            className: "align-right",
            render: function(data) {
              var d = new Date(data);
              return (d.getMonth() + 1) + '/' + d.getDate().pad(2);
            }
          },
          ...

This allows me to send just a single date (format "yyyy/mm/dd") and sort correctly while displaying the date in the format "m/dd". I'm always open to more efficient ways to do this, but I really want the data packet to be written without respect to the UI formatting.

jr42.gordon

I believe you can use the Date() to format output string.

allan

Have a look at this data rendering plug-in. It uses Moment.js to convert from one date format to another, allowing for a huge range in flexibility.

I thought I'd written a blog post about that renderer, but apparently not yet... However, there are doc comments inline with the code showing how to use it .

Allan