如何在Angular中合并从Django REST获取的日期与时间变量

当然可以合并这两个字段，推荐两种方案，你可以根据需求选择在后端（Django REST）或前端（Angular）处理：

方案一：在Django REST后端合并 #

直接在序列化器中新增自定义字段，将date和time合并为完整的datetime后返回给前端，前端无需额外处理。

序列化器示例代码 #

from rest_framework import serializers
from .models import Clinics
from datetime import datetime

class ClinicsSerializer(serializers.ModelSerializer):
    combined_datetime = serializers.SerializerMethodField()

    class Meta:
        model = Clinics
        fields = ['id', 'staff', 'assessment', 'date', 'time', 'combined_datetime']

    def get_combined_datetime(self, obj):
        if obj.date and obj.time:
            # 合并日期与时间为datetime对象
            combined_dt = datetime.combine(obj.date, obj.time)
            # 返回ISO标准格式字符串，前端可直接解析为Date对象
            return combined_dt.isoformat()
        # 若任一字段为空，返回None
        return None

方案二：在Angular前端合并 #

如果不需要修改后端逻辑，可在前端拿到date和time字段后，手动拼接为完整的日期对象。

Angular组件示例代码 #

// 假设从API获取的诊所数据
const clinicData = { date: '2024-05-20', time: '14:30:00' };

let combinedDatetime: Date | null = null;
if (clinicData.date && clinicData.time) {
    // 拼接为ISO格式字符串，适配Date构造函数解析
    const datetimeString = `${clinicData.date}T${clinicData.time}`;
    combinedDatetime = new Date(datetimeString);
}

// 使用合并后的日期对象
console.log(combinedDatetime);

注意：如果后端返回的是UTC时间，需在拼接字符串末尾添加Z（如${clinicData.date}T${clinicData.time}Z），确保时区解析正确。

你的Django模型代码 #

class Clinics(models.Model):
    id = models.ForeignKey(Client, on_delete=models.SET_NULL, null=True, related_name='clint')
    staff= models.ForeignKey(Staff, on_delete=models.SET_NULL, null=True, related_name='staff')
    assessment = models.ForeignKey(Assesment, on_delete=models.SET_NULL, null=True, blank=True)
    date = models.DateField(null=True, blank=True)
    time = models.TimeField(null=True, blank=True)

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