SwiftUI如何展示Firebase中不含毫秒及时区后缀的日期时间

应用开发过程中需要展示不包含秒、毫秒以及末尾+0000时区标识的日期时间。目前通过SwiftUI原生DatePicker实现日期选择，从Firebase Firestore读取存储的日期数据后，直接将原始字符串渲染到视图中时，会展示包含毫秒、时区后缀的完整时间串，需要移除多余字段后正常展示。

现有实现代码 #

日期选择器部分 #

VStack{
    DatePicker("Date", selection: $selectedDate)
        .datePickerStyle(CompactDatePickerStyle())
        .frame(height: 50)
}

数据读取与视图渲染部分 #

func getData() {
    let db = Firestore.firestore()
    db.collection("clubs").getDocuments { snapshot, error in
        if error == nil {
            if let snapshot = snapshot {
                DispatchQueue.main.async{
                    self.list = snapshot.documents.map { d in
                        return Clubs(id: d.documentID,
                                     clubID: d["clubID"] as? Int ?? 0,
                                     clubName: d["clubName"] as? String ?? "",
                                     clubCreator: d["clubCreator"] as? String ?? "",
                                     membersLimit: d["membersLimit"] as? Int ?? 0,
                                     streamingPlatforms: d["streamingPlatforms"] as? Int ?? 0,
                                     streamingType: d["streamingType"] as? Int ?? 0,
                                     teleClubGenres:d["teleClubGenres"] as? [String] ?? [],
                                     date:d["date"] as? String ?? "",
                                     description: d["description"] as? String ?? "", 
                                     uid: d["uid"] as? String ?? "",
                                     currentMembers: d["currentMembers"] as? [String] ?? [],
                                     selectedDate: d["selectedDate"] as? String ?? ""
                        )
                    }
                }
            }
        }
    }
}

// 列表项中渲染日期
Text(tele.selectedDate).frame(maxWidth: .infinity, alignment: .leading)

不要直接把数据库返回的原始时间字符串丢给Text组件渲染，先通过DateFormatter把原始字符串解析为Date对象，再按你需要的格式重新输出成字符串即可，具体实现步骤如下：

• 配置两个DateFormatter：一个用于匹配Firestore返回的原始时间字符串格式做解析，另一个用于定义你最终要展示的日期格式（仅保留年、月、日、时、分，自动去掉秒、毫秒、时区信息）
• 封装一个简单的日期转换方法，处理原始字符串到目标展示字符串的转换
• 替换原有渲染逻辑，传入格式化后的字符串给Text组件

具体实现代码：

// 放在视图内部即可，DateFormatter初始化开销较大，建议用懒加载
private let rawDateParser: DateFormatter = {
    let formatter = DateFormatter()
    // 匹配Firestore默认存储的时间字符串格式
    formatter.dateFormat = "yyyy-MM-dd'T'HH:mm:ss.SSSZ"
    formatter.locale = Locale(identifier: "zh_CN")
    return formatter
}()

private let displayDateFormatter: DateFormatter = {
    let formatter = DateFormatter()
    // 自定义输出格式：年-月-日 时:分，无多余字段
    formatter.dateFormat = "yyyy-MM-dd HH:mm"
    formatter.locale = Locale(identifier: "zh_CN")
    return formatter
}()

private func formatDisplayDate(from rawDateStr: String) -> String {
    guard let parsedDate = rawDateParser.date(from: rawDateStr) else {
        // 解析失败时返回空字符串兜底，可根据业务需求替换为默认文本
        return ""
    }
    return displayDateFormatter.string(from: parsedDate)
}

修改日期渲染的代码，替换原始字符串为格式化后的结果：

Text(formatDisplayDate(from: tele.selectedDate))
    .frame(maxWidth: .infinity, alignment: .leading)

优化建议：Firestore本身支持Timestamp类型字段，后续存储日期时建议直接存Timestamp而非字符串，读取时可以直接转为Date对象，省去原始字符串解析的步骤，也能避免不同时区、不同字符串格式导致的解析失败问题。如果使用Timestamp存储，只需要保留上述输出用的displayDateFormatter直接格式化Date对象即可，不需要额外做字符串解析。

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