Format of Dates

Format of Dates

frosty8467frosty8467 Posts: 3Questions: 2Answers: 0
edited June 25 in Free community support

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.

Answers

  • allanallan Posts: 56,203Questions: 1Answers: 8,902 Site admin

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

    Allan

  • frosty8467frosty8467 Posts: 3Questions: 2Answers: 0

    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

  • colincolin Posts: 14,303Questions: 1Answers: 2,431

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

    Colin

Sign In or Register to comment.