Format of Dates
Format of Dates
frosty8467
Posts: 4Questions: 3Answers: 0
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
Use the
datetimerenderer introduced in DataTables 1.12. Examples are available here.Allan
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
Yep, that code looks like it should work - see an example here where that conversion is being done on the format you posted,
Colin