如何将Django CMS的datetime格式转换为Vue.js可识别的JS Date

看起来你遇到的核心问题是Python的datetime.time对象没法直接被JavaScript解析——你贴的jsonoh其实不是标准JSON格式，而是Python代码里的对象定义，JS肯定认不出datetime.time(19, 0)这种语法。下面分两种场景给你解决方案：

一、最优方案：在Django CMS端输出标准时间格式 #

这是最靠谱的做法，从源头解决格式问题。你需要在Django把datetime.time对象序列化成JS能识别的字符串（比如"HH:mm"或者ISO时间格式）：

Django端处理示例 #

假设你是从Django模型获取营业时间数据，序列化的时候可以用strftime把时间转成字符串：

# 假设你的模型实例是opening_hours
serialized_data = []
for oh in opening_hours:
    serialized_data.append({
        'name': oh.name,
        'am_start': oh.am_start.strftime("%H:%M"),
        'am_stop': oh.am_stop.strftime("%H:%M"),
        'pm_start': oh.pm_start.strftime("%H:%M"),
        'pm_stop': oh.pm_stop.strftime("%H:%M"),
    })
# 然后把serialized_data转成JSON返回给前端

这样前端拿到的就是标准JSON，比如：

[
  {"pm_start": "19:00", "name": "Monday", "am_start": "11:00", "pm_stop": "23:30", "am_stop": "16:00"},
  // ... 其他日期
]

二、前端应急处理：解析现有Python风格的时间格式 #

如果没法修改Django端的输出，只能在前端处理"datetime.time(19, 0)"这种字符串，你可以写一个工具函数来提取小时和分钟，再转成JS Date或者时间字符串：

Vue.js中的处理示例 #

首先，先把你的jsonoh修正为合法的JS数组（把单引号改成双引号，或者用模板字符串包裹），然后写解析函数：

// 工具函数：解析Python datetime.time字符串为JS Date（或者直接返回时间字符串）
function parsePythonTime(timeStr) {
    // 匹配类似"datetime.time(19, 0)"的字符串，提取小时和分钟
    const match = timeStr.match(/datetime\.time\((\d+), (\d+)\)/);
    if (!match) return null;
    
    const [_, hours, minutes] = match;
    // 如果需要Date对象（用于时间比较等操作），可以创建一个基于当前日期的Date
    const date = new Date();
    date.setHours(parseInt(hours), parseInt(minutes), 0, 0);
    return date;
    
    // 如果只是需要显示时间字符串，直接返回`${hours.padStart(2, '0')}:${minutes.padStart(2, '0')}`即可
}

// 在Vue组件中处理数据
export default {
    data() {
        return {
            originalHours: [
                {"pm_start": "datetime.time(19, 0)", "name": "Monday", "am_start": "datetime.time(11, 0)", "pm_stop": "datetime.time(23, 30)", "am_stop": "datetime.time(16, 0)"},
                // ... 其他日期
            ],
            openingHours: []
        };
    },
    mounted() {
        this.openingHours = this.originalHours.map(day => {
            return {
                ...day,
                am_start: parsePythonTime(day.am_start),
                am_stop: parsePythonTime(day.am_stop),
                pm_start: parsePythonTime(day.pm_start),
                pm_stop: parsePythonTime(day.pm_stop)
            };
        });
    }
}

为什么new Date()直接用不行？ #

因为new Date("datetime.time(19, 0)")会返回Invalid Date——JS的Date构造函数只认特定格式的字符串（比如ISO 8601、"MM/DD/YYYY"等），完全识别不了Python的语法，所以必须先提取出小时和分钟再构建Date对象。

额外提示：如果只是显示营业时间 #

如果你的需求只是展示营业时间，不需要做时间比较等逻辑，其实不需要转成JS Date，直接提取小时分钟转成"HH:mm"字符串显示更简单，性能也更好。

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