如何在 momentjs 中格式化持续时间

Question

我制作了一个倒计时时钟，它显示了到某个时刻还有多少年、月、日、小时、分钟和秒。

我只是有一个小问题的解决方案，应该足够明显，但我就是无法解决我的生活。如何格式化来自 timeBetween.hours() 和 timeBetween.seconds() 的数据？我需要它们始终采用 2 位数格式，但默认情况下，如果数字小于 10，则不会用另一个零填充。

format() 函数不适用于持续时间。我通过格式化 moment(timebetween)._data 找到了一个解决方法，但后来我有一个月的休息时间，因为它变成了基于索引的。

代码如下：

const Clock = () => {
const [clock, setClock] = useState(moment());

const theEnd = moment('2050-01-01 00:00:00');
const timeBetween = moment.duration(theEnd.diff(clock));

useEffect(() => { setInterval(() => setClock(moment()), 1000)}, []);

return (
    <div className="clock-container">
        <p className='time'>{`${timeBetween.years()} years, ${timeBetween.months()} months, ${timeBetween.days()} days`}</p>
        <p className='time'>{`${timeBetween.hours()} hours : ${timeBetween.minutes()} minutes : ${timeBetween.seconds()} seconds`}</p>
    </div>
);
};
export default Clock;

Answer 1

我是这样垫的。简单是压倒性的。

const zeroPad = (num: number) => String(num).padStart(2, '0');

<div className="clock-container">
            <p className='time'>{`${timeBetween.years()} years, ${timeBetween.months()} months, ${timeBetween.days()} days`}</p>
            <p className='time'>{`${zeroPad(timeBetween.hours())} hours : ${zeroPad(timeBetween.minutes())} minutes : ${zeroPad(timeBetween.seconds())} seconds`}</p>
        </div>