メニュー

【npm】タイムゾーンを使うときにはdate-fns→date-fns-tz

  • 投稿日
  • 更新日
  • 著者 ひがし
  • カテゴリー React
  • カテゴリー フロントエンド

タイムゾーンはdate-fnsでは設定できない。代わりにdate-fns-tzを使う。
parseISOを使っている場合は、zonedTimeToUtcに切り替える。

parseISO(time);
zonedTimeToUtc(time, 'Asia/Tokyo');

サンプルコード

import { format, zonedTimeToUtc } from 'date-fns-tz';

interface DateProps {
  time: string;
}

function Date({ time }: DateProps) {
  const text = zonedTimeToUtc(time, 'Asia/Tokyo');
  const date = format(text, 'yyyy-MM-dd HH:mm:ssXXX', { timeZone: 'Asia/Tokyo' });
  return <time dateTime={date}>{format(text, 'yyyy/MM/dd')}</time>;
}

export default Date;
npm