如何使用JavaScript将JSON日期格式化为dd/MM/yyyy格式

问题原因 #

你的代码报错是因为错误调用了getDate()方法：Date.getDate()仅返回代表当月日期的数字（比如对应日期2021-11-07的返回值为数字7），而parseISO()要求入参为ISO 8601格式的字符串，传入数字自然无法解析，最终得到无效日期。

解决方案 #

场景1：使用input返回的原始ISO字符串

如果你还保留着input控件直接返回的2021-11-07格式的字符串，直接传入parseISO即可：

import { format, parseISO } from 'date-fns'
// rawDeparting为input直接返回的原始字符串
const formattedDeparting = format(parseISO(rawDeparting), 'dd/MM/yyyy')
// 输出结果：07/11/2021

场景2：变量已经是Date对象实例

如果departing已经被转换为Mon Nov 08 2021 01:00:00 GMT+0100格式的Date对象，不需要调用parseISO，直接传入format即可：

import { format } from 'date-fns'
const formattedDeparting = format(departing, 'dd/MM/yyyy')

如果存在时区偏移导致日期显示差1天的问题，可以指定UTC时区格式化：

import { format, utcToZonedTime } from 'date-fns-tz'
const timeZone = 'UTC'
const zonedDate = utcToZonedTime(departing, timeZone)
const formattedDeparting = format(zonedDate, 'dd/MM/yyyy', { timeZone })

更便捷的Handlebars辅助函数方案 #

建议封装为Handlebars自定义辅助函数，后续所有模板都可以直接调用，不需要重复处理：

// 全局注册日期格式化辅助函数
import { format, parseISO } from 'date-fns'
Handlebars.registerHelper('formatDate', (date, pattern = 'dd/MM/yyyy') => {
  if (!date) return ''
  const dateInstance = typeof date === 'string' ? parseISO(date) : date
  return format(dateInstance, pattern)
})

模板中直接调用即可：

{{formatDate departing}}

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