How to convert a date string into hours, minutes and second using DayJS in react?

Question

I am wondering if there is a way to covert this function by using DayJS:

const formatHours = (dateStr: string) => {
  const date = new Date(dateStr);

  return `${date.getUTCHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}

Answer 1

As per the DayJS documentation you can use dayjs().format()

Installation

You can follow this how to use/install DayJs in projects

Below is format supported

Format  Output  Description
YY      18      Two-digit year
YYYY    2018    Four-digit year
M       1-12    The month, beginning at 1
MM      01-12   The month, 2-digits
MMM     Jan-Dec The abbreviated month name
MMMM    January-December    The full month name
D       1-31    The day of the month
DD      01-31   The day of the month, 2-digits
d       0-6 The day of the week, with Sunday as 0
dd      Su-Sa   The min name of the day of the week
ddd     Sun-Sat The short name of the day of the week
dddd    Sunday-Saturday The name of the day of the week
H       0-23    The hour
HH      00-23   The hour, 2-digits
h       1-12    The hour, 12-hour clock
hh      01-12   The hour, 12-hour clock, 2-digits
m       0-59    The minute
mm      00-59   The minute, 2-digits
s       0-59    The second
ss      00-59   The second, 2-digits
SSS     000-999 The millisecond, 3-digits
Z       +05:00  The offset from UTC, ±HH:mm
ZZ      +0500   The offset from UTC, ±HHmm
A       AM PM   
a       am pm   

const date = new Date()

console.log(dayjs().format('HH:mm:ss'), '//24 hours time')

console.log(dayjs().format('h:m:s a'), '//12 hours time with AM/PM and signle digit')

console.log(dayjs().format('hh:mm:ss A'), '//12 hours time with AM/PM and double')

<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>

Answer 2

Try this :

var dayjsShow = document.querySelector(".dayjs-show")
dayjsShow.innerHTML = dayjs().format('HH:mm:ss');

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.7.8/dayjs.min.js"></script>
<div id="container">
  <div class="item">
    <span class="dayjs-show"></span>
  </div>
</div>

Answer 3

export const formatHours = (dateStr: string) => {
  const date = new Date(dateStr);
  return dayjs(date).format('H:m:s');
};