如何在React.js中仅展示JSON数据中的时分部分？

我写了下面的代码，现在会显示完整的日期时间，但我只想展示小时和分钟（比如14:56）。能不能实现这种时分展示？如果可以，该怎么操作？

JSON数据 #

{     
    "time_start": "2022-12-22 14:56:00",
    "time_end": "2022-12-22 16:56:00"
}

React.js代码 #

{schedules.map(schedule => (
    <div className="each_scheduled" key={schedule.id}>
        <div>
            <p className="scheduled_p">Time</p>
            <p className="scheduled_p">{schedule.time_start} - {schedule.time_end}</p>
        </div>
    </div>
))}

完全可以实现，这里给你三种简单的处理方式：

方法1：直接字符串截取 #

因为你的时间格式是固定的YYYY-MM-DD HH:mm:ss，直接截取对应位置的字符就行：

{schedules.map(schedule => {
    // 截取从第11位到第16位的字符，正好是HH:mm部分
    const startTime = schedule.time_start.slice(11, 16);
    const endTime = schedule.time_end.slice(11, 16);
    return (
        <div className="each_scheduled" key={schedule.id}>
            <div>
                <p className="scheduled_p">Time</p>
                <p className="scheduled_p">{startTime} - {endTime}</p>
            </div>
        </div>
    )
})}

方法2：用Date对象解析处理 #

如果以后时间格式可能变动，或者需要更灵活的处理，用Date对象来解析更稳妥：

{schedules.map(schedule => {
    // 封装一个格式化时间的函数
    const getHourMinute = (timeStr) => {
        const date = new Date(timeStr);
        // 用padStart确保单数字前面补0，比如9点变成09
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        return `${hours}:${minutes}`;
    }
    return (
        <div className="each_scheduled" key={schedule.id}>
            <div>
                <p className="scheduled_p">Time</p>
                <p className="scheduled_p">{getHourMinute(schedule.time_start)} - {getHourMinute(schedule.time_end)}</p>
            </div>
        </div>
    )
})}

方法3：用第三方日期库（可选） #

如果项目里已经在用dayjs、moment这类日期库，直接用它们的格式化方法更省心：
以dayjs为例：

import dayjs from 'dayjs';

// ...

{schedules.map(schedule => (
    <div className="each_scheduled" key={schedule.id}>
        <div>
            <p className="scheduled_p">Time</p>
            <p className="scheduled_p">
                {dayjs(schedule.time_start).format('HH:mm')} - {dayjs(schedule.time_end).format('HH:mm')}
            </p>
        </div>
    </div>
))}

这种方式代码更简洁，也能应对各种复杂的日期格式化需求。

内容的提问来源于stack exchange，提问作者user20271619