Topic: Is there a CLEAR example of how to format a date in a datatable???

DashMarketingGroup priority asked 5 months 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 5 months 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',
});


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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