JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Table › DateTime API in React table
- This topic has 4 replies, 2 voices, and was last updated 1 year, 10 months ago by dave@kato-consulting.com.
-
AuthorPosts
-
November 30, 2022 at 7:46 pm #104039dave@kato-consulting.comParticipant
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 PetersenDecember 1, 2022 at 6:48 am #104040svetoslav_borislavovParticipantHi,
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 BorislavovSmart UI Team
https://www.htmlelements.com/- This reply was modified 1 year, 10 months ago by svetoslav_borislavov.
- This reply was modified 1 year, 10 months ago by svetoslav_borislavov.
December 1, 2022 at 9:20 pm #104046dave@kato-consulting.comParticipantThat 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 PersonDecember 2, 2022 at 4:22 pm #104047svetoslav_borislavovParticipantHi,
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 BorislavovSmart UI Team
https://www.htmlelements.com/- This reply was modified 1 year, 10 months ago by svetoslav_borislavov.
- This reply was modified 1 year, 10 months ago by svetoslav_borislavov.
December 2, 2022 at 7:34 pm #104050dave@kato-consulting.comParticipantThat worked, thank you!
Dave -
AuthorPosts
- You must be logged in to reply to this topic.