jquerydatatablesmomentjstoisostring

How to convert each col by index in a table to local moment?

I have a table containing 8 columns. Each date value in the final column needs to be converted to the browser local. At the moment it shows as UTC:

enter image description here

So I added some JQuery to loop through each row at the index using .eq(index) which works out to be index '6' in JQuery. But when I test this function it only converts the last row UpdatedTime in the table and the time is not local as seen below:

enter image description here

How can I convert each row at a specified column to local moment?

This is the JQuery function I use to loop through:

$(".td-limit").eq(6).each(function () {
        var updatedTimeISO = moment.utc($(this).data('order')).toISOString();
        var updatedTimeLocal = moment(updatedTimeISO);
    $(this).text(updatedTimeLocal);
    });

And these are the columns in the DataTable where the final column is the target UpdatedTime that needs to be converted:

                    @foreach (Models.Escalation item in Model)
                    {

                        <tr>
                            <td>@item.ID</td>
                            <td>@item.Application</td>
                            <td class="td-limit">@item.EMAD</td>
                            <td class="td-limit">@item.Event</td>
                            <td class="td-limit">@item.Status</td>
                            <td style="font-size: 16px;" class=" td-limit">@item.Statement</td>
                            <td class="td-limit">@item.Created</td>
                            <td class="td-limit">@item.Update</td>
                            <td data-order="@item.UnixTimeStamp" class="td-limit">@item.UpdatedTime</td>

                        </tr>

                    }
Solution

  • Modify your Razor so you don't include the updated time. 

     @foreach (Models.Escalation item in Model)
                    {

                        <tr>
                            <td>@item.ID</td>
                            <td>@item.Application</td>
                            <td class="td-limit">@item.EMAD</td>
                            <td class="td-limit">@item.Event</td>
                            <td class="td-limit">@item.Status</td>
                            <td style="font-size: 16px;" class=" td-limit">@item.Statement</td>
                            <td class="td-limit">@item.Created</td>
                            <td class="td-limit">@item.Update</td>
                            <td data-order="@item.UnixTimeStamp" class="td-limit"></td>

                        </tr>

                    }

    Then use this jQuery to update it on the client side. 

    $("td[data-order]").each(function() {
  var updatedTimeISO = moment.utc($(this).data('order')).toISOString();
  var updatedTimeLocal = moment(updatedTimeISO);
  $(this).text(updatedTimeLocal);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td>ID</td>
    <td>Application</td>
    <td class="td-limit">EMAD</td>
    <td class="td-limit">Event</td>
    <td class="td-limit">Status</td>
    <td style="font-size: 16px;" class="td-limit">Statement</td>
    <td class="td-limit">Created</td>
    <td class="td-limit">Update</td>
    <td data-order="2013-02-02T21:01:26.0828604Z" class="td-limit"></td>
  </tr>
  <tr>
    <td>ID</td>
    <td>Application</td>
    <td class="td-limit">EMAD</td>
    <td class="td-limit">Event</td>
    <td class="td-limit">Status</td>
    <td style="font-size: 16px;" class=" td-limit">Statement</td>
    <td class="td-limit">Created</td>
    <td class="td-limit">Update</td>
    <td data-order="2013-03-02T21:01:26.0828604Z" class="td-limit"></td>
  </tr>
  <tr>
    <td>ID</td>
    <td>Application</td>
    <td class="td-limit">EMAD</td>
    <td class="td-limit">Event</td>
    <td class="td-limit">Status</td>
    <td style="font-size: 16px;" class=" td-limit">Statement</td>
    <td class="td-limit">Created</td>
    <td class="td-limit">Update</td>
    <td data-order="2013-07-02T21:01:26.0828604Z" class="td-limit"></td>
  </tr>
</table>