SPFx call a function

Question

We have created SPFx react web part. We want to display data from SharePoint list into a grid. One of the fields is a date field. So need to format the date field. Below is the success function:

success: function(resultData) { 
      reactHandler.setState({ 

        items: resultData.d.results 
      });

And below is the div:

 {this.state.items.map(function(item,key){ 

             return (
              <div className={styles.rowStyle} key={key}>
                <div className={styles.CellStyle}>{item.Title}</div>
                <div className={styles.CellStyle}>{item.StartDate}</div>

              </div>); 
          })}

where item.StartDate is the date field. How to format the below date field to show data in mm/dd/yyyy format instead of SharePoint date format?

Gautam Sheth · Accepted Answer · 2018-10-30T11:28:50.390

You can use the Intl.DateTimeFormat object to modify the date and time formats.

You can declare a function as below:

private formatDate = (date: string) => {
    return new Intl.DateTimeFormat('en-US', { 
        year: 'numeric',
        month: 'numeric',
        day: 'numeric' })
      .format(new Date(date));
};

After that, you can use it in your code as below by calling it:

this.formatDate(item.StartDate)

So, your code would be as below:

{this.state.items.map(function(item,key){ 
     return (
      <div className={styles.rowStyle} key={key}>
        <div className={styles.CellStyle}>{item.Title}</div>
        <div className={styles.CellStyle}>{this.formatDate(item.StartDate)}</div>

      </div>); 
})}

References - Intl.DateTimeFormat

Intl.DateTimeFormat cheatsheet

Updated:

public render() {

    // some code 
    let formatDate = (date: string) => {
        return new Intl.DateTimeFormat('en-US', { 
            year: 'numeric',
            month: 'numeric',
            day: 'numeric' })
          .format(new Date(date));
    };  

    // some code    
    {this.state.items.map(function(item,key){ 
         return (
          <div className={styles.rowStyle} key={key}>
            <div className={styles.CellStyle}>{item.Title}</div>
            <div className={styles.CellStyle}>{formatDate(item.StartDate)}</div>

          </div>); 
    })}

    //some code 
}

Thank you for the code. I tried above code, it shows "Uncaught (in promise) TypeError: Cannot read property 'formatDate' of undefined" in console. Please help if I am missing anything. — 404, Oct 30 '18 at 11:01
Just ensure that it is present inside your component (tsx) file. I wrote this method directly inside the class and used it in the render method — Gautam Sheth, Oct 30 '18 at 11:09
Yes, it is inside the tsx file outside the render method, and called in render method. — 404, Oct 30 '18 at 11:24
can you check with updated code ? I have declared it inside the render method — Gautam Sheth, Oct 30 '18 at 11:29

harshal gite · Answer 2 · 2018-10-30T11:50:01.633

0

You can try this:

{this.state.items.map(function(item,key){ 
         var sDate = new Date(item.StartDate).format("MM/dd/yyyy");
         return (
          <div className={styles.rowStyle} key={key}>
            <div className={styles.CellStyle}>{item.Title}</div>
            <div className={styles.CellStyle}>{sDate}</div>
          </div>); 
      })}

edited Oct 30 '18 at 11:50

answered Oct 30 '18 at 11:31

harshal gite

1,474
1
12
24

It gives "sDate.format("MM/dd/yyyy" as output. Considers it as text even if it is in {} – 404 Oct 30 '18 at 11:47
Try the edited answer. – harshal gite Oct 30 '18 at 11:50
or try this directly (worked for me):
{new Date(item.StartDate).format("MM/dd/yyyy")}
– harshal gite Oct 30 '18 at 12:23
Thank you for the update. For me the last one also shows 'Property "format" does not exist on type "Date" ' – 404 Oct 30 '18 at 12:27

SPFx call a function

2 Answers2