Format of Dates

frosty8467 · June 2022

I have a js file in my MVC project taht displays data pulled form a controller. All works well except that the dates come out in standard SQL format YYY-MM-DDTHH:nn:SS. how do I get them to display as just dates?

I have added the code below.

Thanks in advance

Frosty

var dataTable;

$(document).ready(function () {
    var url = window.location.search;
    if (url.includes("placed")) {
        loadDataTable("GetJobList?status=placed");
    }
    else {
        if (url.includes("awaitingtech")) {
            loadDataTable("GetJobList?status=awaitingtech");
        }
        else {
            if (url.includes("ready")) {
                loadDataTable("GetJobList?status=ready");
            }
            else {
                if (url.includes("intransit")) {
                    loadDataTable("GetJobList?status=intransit");
                }
                else {
                    if (url.includes("inprocess")) {
                        loadDataTable("GetJobList?status=inprocess");
                    }
                    else {
                        if (url.includes("complete")) {
                            loadDataTable("GetJobList?status=complete");
                        } else {
                            if (url.includes("invoiced")) {
                                loadDataTable("GetJobList?status=invoiced");
                            } else {
                                loadDataTable("GetJobList?status=all");
                            }
                        }
                    }
                }
            }
        }
    }
});


function loadDataTable(url) {
    dataTable = $('#tblData').DataTable({
        "ajax": {
            "url": "/Admin/Job/" + url
        },
        "columns": [
            { "data": "id", "width": "2%" },
            { "data": "company.name", "width": "15%" },
            { "data": "orderNumber", "width": "5%" },
            { "data": "location.locationName", "width": "15%" },
            { "data": "jobDate", "width": "18%" },
            { "data": "treatment.treatmentName", "width": "10%" },
            { "data": "jobStatus", "width": "5%" },
            {
                "data": "id",
                "render": function (data) {
                    return `
                            <div class="text-center">
                                <a href="/Admin/Job/Upsert/${data}" class="btn btn-success text-white" style="cursor:pointer" title="Edit Job">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                <a onclick=Cancel("/Admin/Job/Cancel/${data}") class="btn btn-danger text-white" style="cursor:pointer" title="Cancel Job">
                                    <i class="bi bi-x-circle"></i>
                                </a>
                                <a href="/Admin/JobTreatmentReading/Index/${data}" class="btn btn-dark text-white" style="cursor:pointer" title="Readings">
                                    <i class="bi bi-speedometer"></i>
                                </a>
                                <a href="/Admin/JobComment/Index/${data}" class="btn btn-dark text-white" style="cursor:pointer" title="Comments">
                                    <i class="bi bi-chat-square-text"></i>
                                </a>
                                <a href="/Admin/JobBACCDetail/Index/${data}" class="btn btn-dark text-white" style="cursor:pointer" title="Doc. Details">
                                    <i class="bi bi-file-earmark"></i>
                                </a>
                                <a href="/Admin/JobConfirmation/Index/${data}" class="btn btn-dark text-white" style="cursor:pointer">
                                    <i class="bi bi-check-square"></i>
                                </a>
                                <a href="/Admin/JobCharge/Index/${data}" class="btn btn-dark text-white" style="cursor:pointer" title="Job Charges">
                                    <i class="bi bi-currency-dollar"></i>
                                </a>
                            </div>
                           `;
                }, "width": "30%"
            }
        ]
    });
}

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan · June 2022

Use the datetime renderer introduced in DataTables 1.12. Examples are available here.

Allan

frosty8467 · June 2022

Allan,

Sorry I am lost here new to this so not sure what I am doing wrong.

I have add or all ready had the following to my partial page that gets added to all pages

in the Head tag
<link rel="stylesheet" href="~/css/bootswatchTheme.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/NZGBSWeb.styles.css" asp-append-version="true" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
<link rel="stylesheet" href="//cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">

in the footer

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<script src="//cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>

IN my the js file that creates the table I have

dataTable = $('#tblData').DataTable({
"ajax": {
"url": "/Admin/Job/" + url
},
"columnDefs": [
{
"targets": "4",
"render": "DataTable.render.datetime('Do MMM YYYY')",
},
],
"columns": [
{ "data": "id", "width": "2%" },
{ "data": "company.name", "width": "15%" },
{ "data": "orderNumber", "width": "5%" },
{ "data": "location.locationName", "width": "15%"},
{ "data": "jobDate", "width": "18%"},
{ "data": "treatment.treatmentName", "width": "10%" },
{ "data": "jobStatus", "width": "5%" },
{
"data": "id",
"render": function (data) {
return <div class="text-center"> <a href="/Admin/Job/Upsert/${data}" class="btn btn-success text-white" style="cursor:pointer" title="Edit Job"> <i class="bi bi-pencil"></i> </a> <a onclick=Cancel("/Admin/Job/Cancel/${data}") class="btn btn-danger text-white" style="cursor:pointer" title="Cancel Job"> <i class="bi bi-x-circle"></i> </a> <a href="/Admin/JobTreatmentReading/Index/${data}" class="btn btn-dark text-white" style="cursor:pointer" title="Readings"> <i class="bi bi-speedometer"></i> </a> <a href="/Admin/JobComment/Index/${data}" class="btn btn-dark text-white" style="cursor:pointer" title="Comments"> <i class="bi bi-chat-square-text"></i> </a> <a href="/Admin/JobBACCDetail/Index/${data}" class="btn btn-dark text-white" style="cursor:pointer" title="Doc. Details"> <i class="bi bi-file-earmark"></i> </a> <a href="/Admin/JobConfirmation/Index/${data}" class="btn btn-dark text-white" style="cursor:pointer"> <i class="bi bi-check-square"></i> </a> <a href="/Admin/JobCharge/Index/${data}" class="btn btn-dark text-white" style="cursor:pointer" title="Job Charges"> <i class="bi bi-currency-dollar"></i> </a> </div> ;
}, "width": "30%"
}
],
});
}

But I still get the data formatted as YYYY-MM-DDTHH:NN:SS. What am i getting wrong?

Thanks in advance

Matt

colin · June 2022

Yep, that code looks like it should work - see an example here where that conversion is being done on the format you posted,

Colin

Format of Dates

Format of Dates

Answers

Howdy, Stranger!

Categories

DataTables

Format of Dates

Format of Dates

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables