日時フィールドは、カレンダーと時刻選択パネルを利用して日時データを入力するためのフィールドです。
イベントの開催日やセミナーの募集期間、キャンペーンの実施期間、予約枠の開始・終了時刻など、特定の日付・時刻をコンテンツとして管理したい場合に適しています。

データの入稿方法

1. フィールドをクリックすると、日付と時刻を選択するためのパネルが表示されます。
2. カレンダーから日付を選択し、右側のリストから時刻をクリックすると入力欄に反映されます。

API、CSVを利用した入稿については以下のドキュメントをご参照ください。

詳細設定

GET APIのレスポンス形式

詳細は以下のドキュメントをご参照ください。

フロントエンドでの利用方法

日時フィールドは ISO 8601 形式（UTC）が文字列でレスポンスされるため、フロントエンド側では必要に応じて Date オブジェクトへ変換し、任意のタイムゾーンやフォーマットに整形して利用します。
以下はNext.jsの実装例です。

export default async function Page({ params }) {
  const { slug } = await params;

  // microCMS JavaScript SDK（https://github.com/microcmsio/microcms-js-sdk）を使用してデータを取得
  const data = await client.getListDetail({
    endpoint: "blog",
    contentId: slug,
  });

  //  dateFieldはフィールドIDです。実際のフィールドIDに置き換えてください
  const date = new Date(data.dateField);

  // 日本時間(JST)かつ、"YYYY年MM月DD日" の形式に整形
  const formattedDate = new Intl.DateTimeFormat("ja-JP", {
    dateStyle: "long",
    timeZone: "Asia/Tokyo",
  }).format(date);

  return (
    <main>
      <time dateTime={data.dateField}>{formattedDate}</time>
    </main>
  );
}