英文:
how to format Duration in momentjs
问题
I made a countdown clock which shows how many years, months, days, hours, minutes and seconds left until certain moment in time.
I just have a small issue solution to which should be obvious enough but I just can't figure it out for the life of me. How can I format data that comes out of timeBetween.hours() and timeBetween.seconds()? I need them to always be of 2-digit format but by default if a number is less than 10 it's not padded with another zero.
format() function doesn't work with duration. I found a workaround by formatting moment(timebetween)._data but then I have a month off since it becomes index based.
Here's the code:
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().toString().padStart(2, '0')} hours : ${timeBetween.minutes().toString().padStart(2, '0')} minutes : ${timeBetween.seconds().toString().padStart(2, '0')} seconds`}</p></div>);};export default Clock;
英文:
I made a countdown clock which shows how many years, months, days, hours, minutes and seconds left until certain moment in time.
I just have a small issue solution to which should be obvious enough but I just can't figure it out for the life of me. How can I format data that comes out of timeBetween.hours() and timeBetween.seconds()? I need them to always be of 2-digit format but by default if a number is less than 10 it's not padded with another zero.
format() function doesn't work with duration. I found a workaround by formatting moment(timebetween)._data but then I have a month off since it becomes index based.
Here's the code:
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;
答案1
得分: 0
我用这种方式填充它。简单至极。
const zeroPad = (num: number) => String(num).padStart(2, '0');<div className="clock-container"><p className='time'>{`${timeBetween.years()}年，${timeBetween.months()}个月，${timeBetween.days()}天`}</p><p className='time'>{`${zeroPad(timeBetween.hours())}小时：${zeroPad(timeBetween.minutes())}分钟：${zeroPad(timeBetween.seconds())}秒`}</p></div>
英文:
I padded it like this. The simplicity is overwhelming.
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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论