3

My API Date and Time Format is like this: enter image description here

I'm currently using this method to render the date and time in my code. enter image description here

let d = new Date(item.starts_on);
let date = `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`;
let time = `${d.getHours()}:${d.getMinutes()}`;

But i want to render it in this format enter image description here Pls do help me out

vesh silvan
  • 75
  • 1
  • 5

1 Answers1

2

There are two approach for doing it, first way (that is easier) using packages like moment or dayjs by using it you are be able to handle date and convert to many different shapes (for more information check the documents of them). For example if you want to separate date and time from a timestamp you can do it by moment like below:

/*
  other your imports and codes
*/
let timestamp = moment(item.starts_on);
let date = timestamp.format('L');
let time = timestamp.format('LT');
/*
  other your codes
*/

Second way is using at instance of Date, for doing it you can:

/*
  other your imports and codes
*/
let d = new Date(item.starts_on);
let date = `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`;
let time = `${d.getHours()}:${d.getMinutes()}`;
/*
  other your codes
*/

Update Answer For converting date to like "Sat 19 Mar 2022" you want, followings below:

//fill in Months array
const Months = ["Jan", "Feb", ..., "Dec"];
//fill in Days of week array
const Days = ["Sun", "Mon", ..., "Sat"];
/*
  other your codes
*/
let d = new Date(item.starts_on);
let monthIndex = d.getMonth();
let month = Months[monthIndex];
let dayIndex = d.getDay();
let day = Days[dayIndex];

let date = `${day} ${d.getDate()} ${month} ${d.getFullYear()}`;
/*
  other your codes
*/
MHP
  • 577
  • 5
  • 9
  • Thank you for helping me out. I'm using the second way if i want it with the title like "19 March 2022" and the day "Saturday", how would the format look like? – vesh silvan Jun 24 '22 at 09:34
  • In order to use name of the month in the second way, you must to define an array of the months of year then by **getMonth()** (no need more to plus it with one) , get index of the month and select related month by the array of months, so final date shape easily reaching out by a normal concatenation of day, month and year. For adding day of week to your date like the previous approach must to define an array for **days of the week** then by **getDay()** method get day and by it and the days array select that. – MHP Jun 24 '22 at 10:29
  • Can i have a sample structure of code like the above answer given https://stackoverflow.com/a/72739400/19185042 – vesh silvan Jun 24 '22 at 14:00
  • I will update the answer, you just need to update your question so as not to create ambiguity. – MHP Jun 24 '22 at 14:22
  • Done updating the question – vesh silvan Jun 24 '22 at 16:08
  • @veshsilvan I update the answer but it was been good if you hadn't clear the previous question and just update question by ***Update*** topic. – MHP Jun 24 '22 at 18:42
  • thank you for the update. i have another question if i would like to have have "pm' and "am" in my time format...how would the format look like? – vesh silvan Jun 27 '22 at 04:00
  • Your welcome, see link: https://stackoverflow.com/questions/8888491/how-do-you-display-javascript-datetime-in-12-hour-am-pm-format – MHP Jun 27 '22 at 08:36
  • Can i have sample tag code like the above solution "Update Answer" – vesh silvan Jun 27 '22 at 15:58