Format date pulled from API - React

Question

I am currently using componentDidMount to display API data onto my webpage. Most of data are dates i.e. 'due date' '_field' and they display as MM/dd/yyyy HH:mm, however I want to reformat the dates to MM/dd/yyyy on my webpage. not sure where to start, I am familiar with var date = new Date() but not sure if that is to be used in this case

        render() {
        var {items} = this.state
        return (
        ....
        <tbody>

        {items.map(item => ( 

            <tr key={item.summary_type}>

            <td> {item.summary_type} </td>
            <td> {item.supplier_status} </td>
            <td> {item.due_date} </td>
            <td> {item.iso_field} </td>
            <td> {item.as_field} </td>
            <td> {item.nadcap_field} </td>
            <td> {item.cert_field} </td>
            <td> {item.extension_field} </td>

            </tr>
            ))}
            </tbody>
            ....

Girgetto · Accepted Answer · 2019-10-14 16:20:09Z

1

You can create a function to return the first part of the date that you need:

   getDate = (date) => {
     return date.split(' ')[0]
    }

    render() {
    var {items} = this.state
    return (
    ....
    <tbody>

    {items.map(item => ( 

        <tr key={item.summary_type}>

        <td> {item.summary_type} </td>
        <td> {item.supplier_status} </td>
        <td> {this.getDate(item.due_date)} </td>
        <td> {item.iso_field} </td>
        <td> {item.as_field} </td>
        <td> {item.nadcap_field} </td>
        <td> {item.cert_field} </td>
        <td> {item.extension_field} </td>

        </tr>
        ))}
        </tbody>
        ....

answered Oct 14, 2019 at 16:20

Girgetto

1,0869 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Prav Over a year ago

Thanks! i used "return date.split(' ', 1)" to perform the same function and if I am understanding it right I am splitting it once and outputting only the mm/dd/yyyy? in your example does the "[0]" mean split past index 0?

Girgetto Over a year ago

Yes that's it date.split(' ', 1) it's also another good solution, the split method in this case it create an array of two elements, [MM/dd/yyyy, HH:mm] with the [0] we are saying that we want only the element in first position

wentjun · Accepted Answer · 2019-10-14 16:19:37Z

1

I am not sure of the exact input or output, but you can make use of Date.toLocaleDateString to get the desired date string that you need.

const now = new Date();
const dateString = now.toLocaleDateString({
  weekday: "short",
  year: "numeric",
  month: "2-digit",
  day: "numeric"
})

console.log(dateString);

answered Oct 14, 2019 at 16:19

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

Collectives™ on Stack Overflow

Format date pulled from API - React

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related