コンテンツにスキップ
Hypermedia Components

デートピッカー

hc-datepicker は、type が date、datetime-local、month、 time のいずれかであるネイティブの <input> をスタイルします。 ネイティブの input はアクセシブルな挙動をすべて保ちます — キーボード ナビゲーション、ロケールに応じた表示、モバイルでの OS ネイティブの カレンダー / 時刻ピッカー、フォーム送信、min / max / step の バリデーション — 置き換わるのは閉じた状態のクロームだけで、 appearance: none と埋め込み SVG アイコンで実現しています。

完全に自前のカレンダー UI(カスタムハイライト、プリセット範囲、 複数月表示)が必要なら hc-calendar へ — スタイル済みドロップダウングリッドつきの日付フォームフィールドには 公認の input + popover + calendar パターンを 使ってください。ビジネスフォームの大多数にはネイティブ input が正しい デフォルトです。

別名: 日付選択、カレンダー入力。

基本の HTML

Section titled “基本の HTML”

type="time" は末尾のアイコンを時計に切り替えます。他のタイプは すべてカレンダーのグリフを使います。

バリアント

Section titled “バリアント”

hc-input / hc-select と同じ軸です — data-variant は枠線色の 合図として success、warning、error を受け付けます。

支援技術にもフィールドが無効だと認識させるため、 data-variant="error" と一緒に aria-invalid="true" を設定して ください。

サイズ

Section titled “サイズ”

data-size は sm、md(デフォルト)、lg を受け付けます。サイズは hc-button / hc-input / hc-select と同じ --hc-control-* スケールに従うため、data-density="compact" が一貫して縮めます。

無効化

Section titled “無効化”

ネイティブの disabled 属性を使います。コントロールは薄くなり入力を 受け付けなくなります。代わりに readonly を使えば、値は引き続き送信 されます。

範囲ピッカー

Section titled “範囲ピッカー”

ネイティブの <input type="date"> は単一値です。範囲には、 data-hc-range="<param>" を持つグループの中に <param>-from / <param>-to という名前の input を 2 つ置きます — そこから先は kit の installRangeValue() ビヘイビアがペアを引き受け、ページ側のスクリプトは 不要です:

<fieldset class="hc-field" data-hc-range="ship">
  <legend>Ship date</legend>
  <input class="hc-datepicker" type="date" name="ship-from" aria-label="From">
  <span aria-hidden="true">–</span>
  <input class="hc-datepicker" type="date" name="ship-to" aria-label="To">
</fieldset>
  • **ワイヤ上は 1 つの条件。**ペアは ship=2026-07-01..2026-07-31 という 単一エントリに直列化されます(開いた端はそのまま: A..、..B。 両方空なら何も送りません)。期間は削除するチップ 1 つ、保存ビューが 持つ値 1 つです。結合は formdata イベントで行われ、htmx もネイティブ 送信もこのイベントを発火します。
  • **from > to は拒否 — 入れ替えも切り詰めもしません。**ビヘイビアは To コントロールにネイティブの validity message を立てるので、 ブラウザが送信を止め、リクエストは発行されません。黙って並べ替えると 書かれたものと違う条件を実行してしまうからです。
  • no-JS 経路: input は本物の名前を保つので、ビヘイビアなしでは フォームは ship-from / ship-to を送ります。サーバは両方の形を 受け付けます。

固定の上下限は従来どおり input の min / max に置きます。相対的な端 (@month-start-1m)と適用済み条件バーは datagrid-filter レシピ → 日付の範囲 を参照。

htmx での利用

Section titled “htmx での利用”

この input はネイティブの input と同様にフォーム送信へ参加します。 日付変更での即時フィルタには:

<input class="hc-datepicker"
       type="date"
       name="due"
       data-hx-get="/tasks"
       data-hx-trigger="change"
       data-hx-target="#tasks">

アクセシビリティ

Section titled “アクセシビリティ”
  • input には常にラベルを関連付けてください — <label for> つきの hc-field で包む、aria-label、または aria-labelledby を使い ます。
  • ネイティブの input はキーボードを完全に処理します: ← / → が年 / 月 / 日のスピナー間を移動し、↑ / ↓ がアクティブなスピナーを変え ます。カスタムのキーボードハンドラを足さないでください — 組み込みの 挙動と衝突します。
  • アイコンは純粋に装飾です — スクリーンリーダーは background-image を無視します。
  • ローカライズのあるビジネスアプリでは、日付の表示はブラウザが ユーザーのロケールで自動処理します。送信される値は表示ロケールに かかわらず常に ISO 8601(yyyy-mm-dd)です。

テーマ用トークン

Section titled “テーマ用トークン”

component トークン(component.tokens.json):

トークンパス 用途
datepicker.height / padding-x サイズ(--hc-control-* 経由で密度を継承)。
datepicker.radius / font-size / bg / fg / border 面、テキスト、平常時の枠線。
datepicker.focus-border フォーカス時の枠線。
datepicker.error-border / success-border / warning-border バリアントの枠線。
datepicker.disabled-bg 無効時の背景。
datepicker.icon-size カレンダー / 時計アイコンの寸法。
datepicker.sm.* / lg.* 専用の sm / lg 上書き。

CSS 変数

Section titled “CSS 変数”
生成される CSS 変数を表示
--hc-datepicker-height | -padding-x | -radius | -font-size
--hc-datepicker-bg | -fg | -border
--hc-datepicker-focus-border | -error-border | -success-border | -warning-border
--hc-datepicker-disabled-bg
--hc-datepicker-icon-size
--hc-datepicker-sm-height | -sm-padding-x | -sm-font-size
--hc-datepicker-lg-height | -lg-padding-x | -lg-font-size
--hc-color-focus-ring (inherited from data-color)

関連

Section titled “関連”
  • インプット — 同じコントロールスケールを共有するテキスト / textarea の兄弟。
  • セレクト — 同じシェブロン構造のスタイル済みネイティブ <select>。
  • フィールド — ラベル + ヘルパーテキストのラッパー。