CODEWITHSUNDEEP
reactjsdatetime
Prav
Prav

Reputation: 63

Format date pulled from API - React

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>
            ....

Upvotes: 1

Views: 3881

Answers (2)

Girgetto
Girgetto

Reputation: 1086

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>
        ....

Upvotes: 1

wentjun
wentjun

Reputation: 42526

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);

Upvotes: 1

Related Questions