Supabaseで日時を保存しようとしたらエラーになった【React】

学習記録を保存するアプリを React と Supabase で作成中、created_at に関するエラーに遭遇したので記録として残しておきます

開発環境

• フロントエンド: React (TypeScript)
• バックエンド: Supabase
• 状態管理: useState（React標準）
• UIライブラリ: Chakra UI

目的

学習した内容と時間、日時を Supabase に保存する
フォーム入力から title, time, created_at を Supabase に送信する設計です

発生した問題

フォームで created_at を type="time" で入力していたが、Supabase に送信すると以下のエラーが発生

• "The specified value '11:00' does not conform to the required format"
• 400 Bad Request

原因は、React 側で取得された値が時間だけ（"11:00"）だったのに対し、Supabase 側が ISO 形式の日時（"2025-03-28T11:00" など）を要求していたため
type="time" と Supabase の timestamp 型が合っていなかった

対応

入力形式の変更

React 側のフォームで、type="datetime-local" を使用するように変更

<Input
  type="datetime-local"
  value={createdAt}
  onChange={(e) => setCreatedAt(e.target.value)}
/>

送信形式の変換

入力された文字列はそのままでは Supabase に適さないため、Date オブジェクトに変換し、toISOString() で整形してから送信する。

const newRecord = {
  title,
  time: Number(time),
  created_at: new Date(createdAt).toISOString(),
};

参考