SPFx call a function

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;

up vote
1
down vote

favorite

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?

edited 1 hour ago

Robert Lindgren

22.7k94269

asked 1 hour ago

404

1,8591625

add a commentÂ |Â

up vote
1
down vote

favorite

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?

edited 1 hour ago

Robert Lindgren

22.7k94269

asked 1 hour ago

404

1,8591625

add a commentÂ |Â

up vote
1
down vote

favorite

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?

edited 1 hour ago

Robert Lindgren

22.7k94269

asked 1 hour ago

404

1,8591625

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?

spfx

edited 1 hour ago

Robert Lindgren

22.7k94269

asked 1 hour ago

404

1,8591625

edited 1 hour ago

Robert Lindgren

22.7k94269

asked 1 hour ago

404

1,8591625

edited 1 hour ago

Robert Lindgren

22.7k94269

edited 1 hour ago

Robert Lindgren

22.7k94269

edited 1 hour ago

Robert Lindgren

22.7k94269

asked 1 hour ago

404

1,8591625

asked 1 hour ago

404

1,8591625

asked 1 hour ago

404

1,8591625

add a commentÂ |Â

2 Answers
2

active

oldest

votes

up vote
2
down vote

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

edited 15 mins ago

answered 57 mins ago

Gautam Sheth

22.8k12046

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
42 mins ago

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
34 mins ago

Yes, it is inside the tsx file outside the render method, and called in render method.
â€“Â 404
19 mins ago

can you check with updated code ? I have declared it inside the render method
â€“Â Gautam Sheth
15 mins ago

add a commentÂ |Â

up vote
0
down vote

You can try this:

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

answered 13 mins ago

harshal gite

351110

add a commentÂ |Â

Your Answer

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "232"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: false,
noModals: false,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsharepoint.stackexchange.com%2fquestions%2f251767%2fspfx-call-a-function%23new-answer', 'question_page');

);

Post as a guest

Name

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
2
down vote

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

edited 15 mins ago

answered 57 mins ago

Gautam Sheth

22.8k12046

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
42 mins ago

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
34 mins ago

Yes, it is inside the tsx file outside the render method, and called in render method.
â€“Â 404
19 mins ago

can you check with updated code ? I have declared it inside the render method
â€“Â Gautam Sheth
15 mins ago

add a commentÂ |Â

up vote
2
down vote

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

edited 15 mins ago

answered 57 mins ago

Gautam Sheth

22.8k12046

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
42 mins ago

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
34 mins ago

Yes, it is inside the tsx file outside the render method, and called in render method.
â€“Â 404
19 mins ago

can you check with updated code ? I have declared it inside the render method
â€“Â Gautam Sheth
15 mins ago

add a commentÂ |Â

up vote
2
down vote

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

edited 15 mins ago

answered 57 mins ago

Gautam Sheth

22.8k12046

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

edited 15 mins ago

answered 57 mins ago

Gautam Sheth

22.8k12046

edited 15 mins ago

answered 57 mins ago

Gautam Sheth

22.8k12046

answered 57 mins ago

Gautam Sheth

22.8k12046

answered 57 mins ago

Gautam Sheth

22.8k12046

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
42 mins ago

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
34 mins ago

Yes, it is inside the tsx file outside the render method, and called in render method.
â€“Â 404
19 mins ago

can you check with updated code ? I have declared it inside the render method
â€“Â Gautam Sheth
15 mins ago

add a commentÂ |Â

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
42 mins ago

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
34 mins ago

Yes, it is inside the tsx file outside the render method, and called in render method.
â€“Â 404
19 mins ago

can you check with updated code ? I have declared it inside the render method
â€“Â Gautam Sheth
15 mins ago

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
42 mins ago

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
34 mins ago

Yes, it is inside the tsx file outside the render method, and called in render method.
â€“Â 404
19 mins ago

can you check with updated code ? I have declared it inside the render method
â€“Â Gautam Sheth
15 mins ago

add a commentÂ |Â

up vote
0
down vote

You can try this:

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

answered 13 mins ago

harshal gite

351110

add a commentÂ |Â

up vote
0
down vote

You can try this:

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

answered 13 mins ago

harshal gite

351110

add a commentÂ |Â

up vote
0
down vote

You can try this:

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

answered 13 mins ago

harshal gite

351110

You can try this:

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

answered 13 mins ago

harshal gite

351110

answered 13 mins ago

harshal gite

351110

answered 13 mins ago

harshal gite

351110

answered 13 mins ago

harshal gite

351110

add a commentÂ |Â

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

Search This Blog

Iyfjky