-1

Hi i have a react application. and I have a time column in my cards rendered,but the format is something weird .I dont understand. "Time : 2000-01-01T21:51:00.373Z" ....Like is there any way I can I can change this listed time to just a normal time. Here is the code Reservation Card

function ReservationCard({ reservation, handleCancel, onUpdateReservation }) {
  const { name, date, time, num, contact, occasion } = reservation;
  const [isEditing, setIsEditing] = useState(false);
  const handleReservationUpdate = (updatedReservation) => {
    setIsEditing(false);
    onUpdateReservation(updatedReservation);
  };

  function handleDeleteClick() {
    fetch(`/reservations/${reservation.id}`, {
      method: "DELETE",
    });
    handleCancel(reservation.id);
  }

  return (
    <>
      {isEditing ? (
        <Box m={4} sx={{ width: 500 }}>
          <div className="overlay2">
          <EditReservationForm
            reservation={reservation}
            onUpdateReservation={handleReservationUpdate}
          />
          </div>
        </Box>
      ) : (
        <>
          <Box m={4} sx={{ width: 500 }}>
            <Card width={5}>
              <CardContent>
                <Typography variant="h5" component="div">
                  {reservation.restaurant.name}
                </Typography>
                <br />
                <Typography sx={{ mb: 1.5 }} color="text.secondary">
                  Guest Details
                </Typography>
                <Typography variant="h6" component="div">
                  {name}
                </Typography>
                <Typography variant="h6">{contact}</Typography>
                <Typography variant="h6">Date:{date}</Typography>
                <Typography variant="h6">Time : {time}</Typography>
                <Typography variant="h6">Guests : {num}</Typography>
                <Typography variant="h6">Occasion:{occasion}</Typography>
              </CardContent>
              <CardActions>
                <Button onClick={() => setIsEditing((isEditing) => !isEditing)}>
                  {" "}
                  Modify Booking
                </Button>

                <Button onClick={handleDeleteClick}>Cancel Booking</Button>
              </CardActions>
            </Card>
          </Box>
        </>
      )}
    </>
  );
}
export default ReservationCard;

I can share the reservation form as well if the problem is in that component??

codertraveller
  • 55
  • 4
  • You don't need separate `date` and `time` properties, since a `Date` object in JavaScript contains both date and time. Also, have a look at [`Intl`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) and specifically [`Intl.DateTimeFormat.prototype.format()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format). – Lucero Sep 17 '22 at 13:45
  • Probably a duplicate of [*Where can I find documentation on formatting a date in JavaScript?*](https://stackoverflow.com/questions/1056728/where-can-i-find-documentation-on-formatting-a-date-in-javascript) – RobG Sep 18 '22 at 22:02

1 Answers1

2

This is ISO format of datetime data in JavaScript. You can use the Date constructor methods to get the datetime string in desired format.

new Date("2000-01-01T21:51:00.373Z").toISOString()

'2000-01-01T21:51:00.373Z'

new Date("2000-01-01T21:51:00.373Z").toString()

'Sun Jan 02 2000 03:21:00 GMT+0530 (India Standard Time)'

new Date("2000-01-01T21:51:00.373Z").toLocaleString()

'1/2/2000, 3:21:00 AM'

new Date("2000-01-01T21:51:00.373Z").toGMTString()

'Sat, 01 Jan 2000 21:51:00 GMT'

etc.

bni
  • 47
  • 4