Search code examples
javascriptjqueryasp.net-mvcdatatabledatatables

How do I format datetime column in jQuery Datable(server side)


I am implementing jQuery server-side datatable. I have 1 date column and 2 datetime columns. All 3 are displaying on datatable in a wrong format.

Received Date: /Date(1373947200000)/ (Date)

Created Date: /Date(1374845903000)/ (Datetime)

Updated Date: /Date(1374845903000)/ (Datetime)

How can I display in a correct format?

.cshtml

<table id="disparityForm" class="ui celled table" style="width:100%">
    <thead>
        <tr>
            <th>Status</th>
            <th>Received Date</th>
            <th>Member ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Created User</th>
            <th>Created Date</th>
            <th>Updated User</th>
            <th>Updated Date</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Status</th>
            <th>Received Date</th>
            <th>Member ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Created User</th>
            <th>Created Date</th>
            <th>Updated User</th>
            <th>Updated Date</th>
        </tr>
    </tfoot>
</table>

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.css" rel="stylesheet" />
<link href="~/Content/DataTables/media/css/dataTables.semanticui.min.css" rel="stylesheet" />

@section scripts{
    <script src="~/Scripts/DataTables/media/js/jquery.dataTables.min.js"></script>
    <script src="~/Scripts/DataTables/media/js/dataTables.semanticui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.js"></script>

    <script>
        $(document).ready(function () {
            $("#disparityForm").DataTable({
                "ajax": {
                    "url": "/DisprtyForm/GetList",
                    "type": "POST",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "STS", "name": "STS" },
                    { "data": "RECEIVED_DATE", "name": "RECEIVED_DATE" },
                    { "data": "MBR_AGP_ID_NUM", "name": "MBR_AGP_ID_NUM" },
                    { "data": "MBR_FST_NME", "name": "MBR_FST_NME" },
                    { "data": "MBR_LST_NME", "name": "MBR_LST_NME" },
                    { "data": "CREATE_USR_ID", "name": "CREATE_USR_ID" },
                    { "data": "AUDIT_CREATE_DT", "name": "AUDIT_CREATE_DT" },
                    { "data": "UPDT_USR_ID", "name": "UPDT_USR_ID" },
                    { "data": "AUDIT_UPDT_DT", "name": "AUDIT_UPDT_DT" },
                ],

                "serverSide": "true",
                "order": [0, "asc"],
                "processing": "true",
                "language": {
                    "processing": "processing...Please wait"
                }
            });
        })

    </script>
}

Below is the c# Code that return json format.

 [HttpPost]
    public ActionResult GetList()
    {
        //Server side Parameters
        int start = Convert.ToInt32(Request["start"]);
        int length = Convert.ToInt32(Request["length"]);
        string searchValue = Request["search[value]"];
        string sortColumnName = Request["columns[" + Request["order[0][column]"] + "][Name]"];
        string sortDirection = Request["order[0][dir]"];


        List<DISPRTY_FORM> disprtyFormList = new List<DISPRTY_FORM>();
        using (DBModel db = new DBModel())
        {
            disprtyFormList = db.DISPRTY_FORM.ToList<DISPRTY_FORM>();
            int totalrows = disprtyFormList.Count;

            //Todo filtering

            int totalRowsAfterFiltering = disprtyFormList.Count;

            //sorting
            disprtyFormList = disprtyFormList.OrderBy(sortColumnName + " " + sortDirection).ToList<DISPRTY_FORM>();

            //paging
            disprtyFormList = disprtyFormList.Skip(start).Take(length).ToList<DISPRTY_FORM>();

            var jsonResult = Json(new { data = disprtyFormList, draw = Request["draw"], recordsTotal = totalrows, recordsFiltered = totalRowsAfterFiltering }, JsonRequestBehavior.AllowGet);
            jsonResult.MaxJsonLength = int.MaxValue;

            return jsonResult;
        }
    }

Solution

  • You can use third party library "moment.js". Make sure your have added moment.js library

      { data: "AUDIT_CREATE_DT" ,
                              "render": function (value) {
                                  if (value === null) return "";
                                  return moment(value).format('DD/MM/YYYY');
                              }
    

    I hope this solution will work. Update: here is official link of Moment.js