Topic: Is there a CLEAR example of how to format a date in a datatable???
DashMarketingGroup priority asked 1 year ago
I am using an async datatable in a web project to fetch data from a webhandler and display it. One of the fields is a date value that currently displays as '2023-11-29T00:00:00'. I want the date to display in mm/dd/yyyy format.
Here is the HTML definition of the datatable:
<div class="row mb-4 d-flex justify-content-center">
<div class="datatable" id="dtForums" name="dtForums" data-mdb-loading="false"
data-mdb-loader-class="bg-success" data-mdb-fixed-header="true" data-mdb-loading-message="Loading data..."
data-mdb-no-found-message="No forum records to display" data-mdb-striped="true">
</div>
</div>
Here is the Javascript definition of the table:
const columns = [
{ label: 'Options', field: 'Options', maxWidth: 100, fixed: false },
{ label: 'Title', field: 'Title', maxWidth: 460, fixed: false, sort: true },
{ label: 'Created', field: 'CreatedOn', maxWidth: 200, fixed: false, sort: true },
{ label: 'Threads', field: 'Threads', maxWidth: 100, fixed: false, sort: true },
{ label: 'Posts', field: 'Posts', maxWidth: 100, fixed: false, sort: true },
];
const asyncTable = new mdb.Datatable(
document.getElementById('dtForums'),
{ columns, },
{ loading: true, maxWidth: 960, borderColor: "dark", hover: true, fullPagination: true, sm: true }
);
const setActions = () => {
document.getElementsByClassName('view-btn').forEach(btn => {
btn.addEventListener('click', () => {
displayMarket(btn.attributes["data-forumID"].value);
})
});
};
Here is the call to the AJAX webhandler to display the data:
function loadForums() {
fetch('handlers/getforumlist.ashx')
.then((response) => response.json())
.then((data) => {
asyncTable.update({
rows: data.map((forums) => ({
...forums,
Title: forums.Title,
Created: formatDate(forums.CreatedOn),
Threads: forums.Threads,
Posts: forums.Posts,
Options: '<button class="view-btn btn btn-success btn-floating" title="Detail" data-forumID="' + forums.ForumID + '"><i class="fa-solid fa-trash-can"></i></button>',
})),
},
{ loading: false }
);
});
};
The function to format the date is here:
function formatDate(value) {
var d = new Date(value);
return d.getMonth()+1 + '/' + d.getDay() + '/' + d.getYear();
}
When I run the code, I don't get any error, but the date format of the datatable doesn't change. What am I doing wrong? I was trying to use moment.js to format the date but that doesn't work either. Help would be appreciated.
Kamila Pieńkowska staff answered 1 year ago
This is not a problem of the datatable.
Here is example on how to format date:
const currentDate = new Date();
const formattedDate = currentDate.toLocaleDateString('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
});
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.0.0
- Device: desktop
- Browser: chrom
- OS: win 11
- Provided sample code: No
- Provided link: No