Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #104039

    Hi,
    I’m trying to do a custom date format in a Table column. How do I do that in React? I’m trying the code below, but get the error “Smart is not defined”.

    Is there an NPM package for Smart.utilities? If not, how would I reference the smart .js scripts?

        const columns = [
        {
            label: ‘Appointment’,
            dataField: ‘Appointment’,
            //dataType: ‘date’,
            formatFunction: function (settings) {
                const formatedDate = new Smart.Utilities.DateTime(settings.value).toString(‘MM/dd/yyyy ‘);
                settings.template = <div> ${formatedDate}</div>
            }
        },

    Thank you,
    Dave Petersen

    #104040

    Hi,

    You can import Smart and use it this way:
    import { Grid, Smart } from ‘smart-webcomponents-react/grid’;

    I hope this helps, if not, do not hesitate to contact us!

    Best Regards,
    Svetoslav Borislavov

    Smart UI Team
    https://www.htmlelements.com/

    #104046

    That worked, thank you. My other problem now is the function is not returning the formatted date. Here is my updated code:

    import { Table, Smart } from ‘smart-webcomponents-react/table’;

    const columns = [
    {
    label: ‘First name’,
    dataField: ‘FirstName’,
    dataType: ‘string’
    },
    {
    label: ‘Last Name’,
    dataField: ‘LastName’,
    dataType: ‘string’
    },
    {
    label: ‘Appointment’,
    dataField: ‘Appointment’,
    //dataType: ‘date’,
    formatFunction: function (settings) {
    const formatedDate = new Smart.Utilities.DateTime(settings.value).toString(‘MM/dd/yyyy ‘);
    console.log(formatedDate);
    settings.template = <div>${formatedDate}</div>
    }
    },

    In the table, the date displays as: 2022-12-01T15:10:34.433Z
    In the console it logs properly as: 12/02/2022.

    It should display in the table as 12/02/2022, what am I doing wrong? Do I need to return something from formatFunction? I’m not setting a dataType for the Appointment column.

    The data is coming in from SQL:
    SELECT
    FirstName,
    LastName,
    getdate() AS Appointment
    FROM Person

    #104047

    Hi,

    You should change the settings.value in order to display the correct format.
    {
    label: ‘Date’,
    dataField: ‘date’,
    formatFunction: function (settings) {

    const formatedDate = new Smart.Utilities
    .DateTime(settings.value)
    .toString(‘MM/dd/yyyy’);

    settings.value = formatedDate;</div>

    }
    }

    Best Regards,
    Svetoslav Borislavov

    Smart UI Team
    https://www.htmlelements.com/

    #104050

    That worked, thank you!
    Dave

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.