Angular 4中UTC时间转意大利时区有效日期字符串方案咨询
不用第三方组件解决Angular 4中UTC日期转意大利时区的问题
当然可以不借助第三方组件搞定这个问题!先帮你理清楚核心问题:你用toLocaleString得到的是面向用户的本地化显示字符串,它的格式是为了可读性设计的,并不是机器能稳定解析的标准日期格式,所以直接用new Date()去解析它肯定会出问题。下面分两种场景给你解决方案:
场景1:只需要显示意大利时区的日期
如果你的需求只是把UTC日期转换成意大利时区的格式展示给用户,那toLocaleString本身是没问题的,只是可以通过指定格式选项让输出更规范统一,避免出现单数字的月/日:
// 假设res是你的UTC日期字符串,比如"2018-01-16T11:29:48.151Z" const utcDate = new Date(res); // 这里得到的Date对象存储的是时间戳,和时区无关 // 格式化时指定详细选项,确保输出是两位数的月/日/时分秒 const displayDate = utcDate.toLocaleString('it-IT', { timeZone: 'Europe/Rome', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }); // 输出会是类似 "16/01/2018, 12:30:29" 这样的规范格式,直接用来显示就好
这个场景下,你完全不需要把displayDate转回Date对象——保留原始的utcDate对象用来做日期相关的逻辑操作,只在展示时用格式化后的字符串就行。
场景2:需要生成机器可解析的意大利时区日期字符串
如果你需要把转换后的日期传递给后端、存储起来,或者后续还要转回Date对象,那不能用toLocaleString的输出结果,得换两种思路:
思路1:用时间戳传递(最可靠)
Date对象的本质是从1970年UTC开始的毫秒数,直接传递时间戳是完全没有时区问题的,需要显示时再转成意大利时区格式:
const timestamp = new Date(res).getTime(); // 得到时间戳,比如1516085388151 // 后续需要显示时 const displayDate = new Date(timestamp).toLocaleString('it-IT', {timeZone: 'Europe/Rome'});
思路2:用formatToParts构建标准格式
如果你必须要字符串格式(比如YYYY-MM-DD HH:mm:ss),可以用Intl.DateTimeFormat的formatToParts方法拆分日期各个部分,再拼接成标准格式:
const utcDate = new Date(res); const formatter = new Intl.DateTimeFormat('it-IT', { timeZone: 'Europe/Rome', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }); // 获取日期的各个组成部分 const dateParts = formatter.formatToParts(utcDate); // 拼接成你需要的标准格式,比如YYYY-MM-DD HH:mm:ss const standardDateString = `${dateParts.find(p => p.type === 'year').value}-${dateParts.find(p => p.type === 'month').value}-${dateParts.find(p => p.type === 'day').value} ${dateParts.find(p => p.type === 'hour').value}:${dateParts.find(p => p.type === 'minute').value}:${dateParts.find(p => p.type === 'second').value}`; // 输出是 "2018-01-16 12:30:29",这个字符串可以被new Date()正确解析
总结
- 只做展示:用带格式选项的
toLocaleString,保留原始Date对象做逻辑操作; - 需要传递/存储:优先用时间戳,或者用
formatToParts构建标准可解析字符串,别用toLocaleString的输出反向解析。
内容的提问来源于stack exchange,提问作者Alessandro Celeghin
相关产品推荐
相关产品推荐

