ドキュメントの更新を同期

docs/manual/日時.md

@@ -0,0 +1,88 @@
+---
+contentId: date
+directory: manual
+---
+
+# 日時
+
+日時フィールドは、カレンダーと時刻選択パネルを利用して日時データを入力するためのフィールドです。  
+イベントの開催日やセミナーの募集期間、キャンペーンの実施期間、予約枠の開始・終了時刻など、特定の日付・時刻をコンテンツとして管理したい場合に適しています。
+
+データの入稿方法
+--------
+
+![日時フィールドの操作画面。カレンダー形式での日付選択と、リスト形式での時刻選択ができるUI。](https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/0051d7e32b4048aaa7376fa62e5004a5/CleanShot%202025-12-19%20at%2016.43.15.png?w=573&h=528)
+
+1.  フィールドをクリックすると、日付と時刻を選択するためのパネルが表示されます。
+2.  カレンダーから日付を選択し、右側のリストから時刻をクリックすると入力欄に反映されます。
+
+
+API、CSVを利用した入稿については以下のドキュメントをご参照ください。
+
+https://document.microcms.io/content-api/post-content#h1e35956891
+
+https://document.microcms.io/manual/csv-import#h2b3036ae9c
+
+詳細設定
+----
+
+設定項目
+
+説明
+
+必須項目
+
+設定をONにすると入稿時の入力が必須となります。
+
+説明文
+
+入稿画面に表示する説明文です。
+
+日付指定のみ
+
+設定をONにすると時刻の指定が無効化され、日付のみを選択・管理する形式となります。
+
+初期値
+
+入稿時の初期値を設定できます。
+
+*   「日付指定のみ」をONにした場合も、APIのレスポンスは時刻情報（`"T00:00:00.000Z"`の部分）が付与された状態で返却されます。
+*   現在、時刻のみ（日付なし）の指定には対応しておりません。時刻のみを管理したい場合は、「テキストフィールド」や「セレクトフィールド」を活用した代替案をご検討ください。
+
+GET APIのレスポンス形式
+---------------
+
+詳細は以下のドキュメントをご参照ください。
+
+https://document.microcms.io/content-api/get-api-field-responses#ha02e64e4be
+
+フロントエンドでの利用方法
+-------------
+
+日時フィールドは 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>
+      );
+    }