如何在 jQuery Datable（服務器端）中格式化日期時間列

Question

我正在實現 jQuery 服務器端數據表。 我有 1 個日期列和 2 個日期時間列。 所有 3 個都以錯誤的格式顯示在數據表上。

收貨日期：/Date(1373947200000)/ (Date)

創建日期：/Date(1374845903000)/ (Datetime)

更新日期：/Date(1374845903000)/ (Datetime)

如何以正確的格式顯示？

.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> }

下面是返回json格式的c#代碼。

 [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;
        }
    }

Answer 1

您可以使用第三方庫“ moment.js”。 確保您已經添加了moment.js庫

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

我希望這個解決方案能起作用。 更新：這是Moment.js的官方鏈接

Answer 2

/Date(1374845903000)/ 

那就是您擁有的DateTime值的紀元表示形式。 json序列化程序（由asp.net mvc使用）將DateTime對象的值轉換為其對應的unix紀元時間（自1970年1月1日（星期四）00:00:00協調世界時（UTC）起經過的秒數）。

現在對於數據表，對於每一列，您可以覆蓋應如何在單元格中呈現它。 您所要做的就是，執行一些javascript代碼，以將該時期值轉換為可讀的字符串。 因此，我們將編寫一個輔助方法，將時間戳記值格式化為可讀的字符串表示形式，並指定該輔助方法作為這些日期列的render回調

$(document).ready(function () {

    // Accepts the epoch timestamp value and return a Date string
    function getDateString(date) {
        var dateObj = new Date(parseInt(date.substr(6)));
        return dateObj.toDateString();
    }

    $('#disparityForm').DataTable({
        "ajax": {
            "url": "/Home/GetList",
            "type": "POST",
            "datatype": "json"
        },
        "columns": [
            { "data": "STS", "name": "STS" },
            { "data": "MBR_FST_NME", "name": "MBR_FST_NME" },
            {
                "data": "AUDIT_CREATE_DT", "name": "AUDIT_CREATE_DT", 
                "render": function (data) { return getDateString(data); }
            }
        ]
    });

});

那應該修復創建的日期列。 對其他列也執行相同的操作。

Answer 3

 AUDIT_CREATE_DT

 { "data": "AUDIT_CREATE_DT", "render": function (data) { var date = new Date(data); var month = date.getMonth() + 1; return (month.toString().length > 1 ? month : "0" + month) + "/" + date.getDate() + "/" + date.getFullYear(); } }