Formatting date and time using Moment with React JS

Question

I'm new into coding and I'm trying to format date as DD/MM/YYYY and time as HH:MM using React Moment. I tried many methods with no success. It would be great if anyone could help me with this issue, as I'm still learning the basics.

How am I supposed to format {props.date} and {props.time} to make it more user-friendly?

Here's the code that I have:

import React, { Component } from "react";
import CreatedAtShow from "./CreatedAtShow";
import { Opportunities } from "../requests";
import { OpportunityShowPage } from "./OpportunityShowPage";
import moment from "react-moment";

function OpportunityDetails(props) {
  return (
        <div>
              <h2>
                  Opportunity: <br />
                  {props.title}
              </h2>
              <p></p>
              <h3>
                  Description: <br />
                  {props.description}
              </h3>
              
              <p>Tag:{props.tags}</p>
              <p>Date:{props.date}</p>
              <p>Time: {props.time}</p>
              <p>Where: {props.where}</p>
              <p>Contact information: {props.contact}</p>
              <p><CreatedAtShow created_at={props.created_at} /></p>    
  
              <button className="ui button"
                onClick={() => {
                    props.editOpportunity(props.id);
                }}
                > 
                Edit 
              </button>

              <button className="ui button"
              
                  onClick={() => props.deleteOpportunity(props.id)
                    // props.deleteOpportunity(props.id);
                  }> 
                  Delete 
              </button>
        </div>
  );
}

export default OpportunityDetails;

Hi, can you please provide some inputs and desired outputs for date — Shivanshu Gupta
– Shivanshu Gupta, Commented Jun 30, 2020 at 18:36
What do they look like now? Can you post what the current format of props.date and props.time are? Moment.js has a .parse and a .format function, have you used those before? — CRice
– CRice, Commented Jun 30, 2020 at 18:36
Right now the formats are: Date:2020-06-30T00:00:00.000Z and Time: 2020-06-24T15:00:00.000Z — ReactNewbie
– ReactNewbie, Commented Jun 30, 2020 at 18:48

Shivanshu Gupta · Accepted Answer · 2020-06-30 18:56:46Z

1

you can use momement js format function like this to get the desired part from date. If you can provide me some sample inputs and desired outputs then i can give you the exact answer. If you want to use with official moment.js npm then use below code.

If you want to get date and time from existing date then you can follow this:

<p>Date:{moment(props.date).format("DD/MM/YYYY"}</p>
<p>Time:{moment(props.time).format("HH:MM")}</p>

If you want today's or system date to be displayed then you can use:

<p>Date:{moment().format("DD/MM/YYYY"}</p>
<p>Time:{moment().format("HH:MM")}</p>

If you want to use react-moment then you can try this:

<p>Date:<Moment format="DD/MM/YYYY">{props.date}</Moment></p>
<p>Time:<Moment format="HH:MM">{props.time}</Moment></p>

edited Jun 30, 2020 at 18:56

answered Jun 30, 2020 at 18:39

Shivanshu Gupta

3242 silver badges9 bronze badges

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

3 Comments

ReactNewbie Over a year ago

I'm getting an error: TypeError: Cannot call a class as a function

Shivanshu Gupta Over a year ago

i see you are using react-moment not official moment.js npm. If you want you can install moment using npm install moment then just import moment from "moment" in your project and try.

Shivanshu Gupta Over a year ago

if you want to use react-moment then you can get the code from above. The other thing you have to change is the import like import Moment from "react-moment"

Collectives™ on Stack Overflow

Formatting date and time using Moment with React JS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related