syncfusion-aspnetcore-timepicker

Syncfusion ASP.NET Core TimePicker

TimePicker は、ポップアップリストから時刻を選択するか、直接入力できる直感的な入力コンポーネントです。時刻の範囲、厳密モード、マスキング、グローバリゼーション、RTL、アクセシビリティ、および豊富なカスタマイズオプションをサポートしています。

ナビゲーションガイド

はじめに

📄 参照: references/getting-started.md

• NuGet パッケージのインストールとセットアップ
• タグヘルパーの登録、スクリプトとスタイルの参照
• <ejs-timepicker> を使用した基本的な TimePicker のレンダリング
• 値、最小時刻、最大時刻の設定
• 時刻形式とステップ間隔の設定
• TimePickerFor のモデルバインディング

時刻の範囲

📄 参照: references/time-range.md

• Min と Max を使用した最小・最大時刻の境界設定
• 値が範囲外の場合の動作
• 2 つの TimePicker による範囲選択（開始時刻／終了時刻）
• 開始時刻の選択に応じた終了時刻の有効化／無効化
• 営業時間の選択パターン

厳密モード

📄 参照: references/strict-mode.md

• 有効な時刻の入力を強制する StrictMode の有効化
• 範囲外の値を最小値／最大値に補正
• デフォルト（非厳密）モードでのエラークラスによる表示
• 非厳密モードでの無効な値に対する null の動作

グローバリゼーション

📄 参照: references/globalization.md

• Locale プロパティによるカルチャの設定
• 英語以外のカルチャ向けの CLDR データの読み込み
• L10n プレースホルダーのローカライズ
• アラビア語やヘブライ語向けの EnableRtl による RTL サポート
• ドイツ語とアラビア語のカルチャの例

時刻のマスキング

📄 参照: references/time-masking.md

• EnableMask によるマスク入力の有効化
• 書式文字列に基づくマスクパターン
• MaskPlaceholder によるカスタムマスクプレースホルダー（時、分、秒）
• マスクされたセグメント内でのキーボード操作

スタイルと外観

📄 参照: references/style-appearance.md

• CssClass プロパティを使用した CSS のカスタマイズ
• 利用可能な CSS クラスの対象（ラッパー、アイコン、ポップアップ、リスト項目）
• 入力欄、ポップアップボタン、ポップアップリスト、ホバー／アクティブ状態のカスタマイズ
• FullScreenMode によるモバイルでの全画面ポップアップモード
• ラッパーの高さ、フォントサイズ、背景色の上書き

アクセシビリティ

📄 参照: references/accessibility.md

• WCAG 2.2 AA への準拠に関する詳細
• WAI-ARIA 属性：aria-haspopup、aria-selected、aria-disabled など
• キーボード操作の全一覧
• スクリーンリーダーのサポート
• RTL、色のコントラスト、モバイルデバイスのサポート

ハウツーガイド

📄 参照: references/how-to.md

• FormValidator を使用したクライアント側フォーム検証
• カスタムクラス名による CSS のカスタマイズ
• モデルバインディングとフォーム POST を使用した TimePickerFor のレンダリング

API リファレンス

📄 参照: references/api.md

• 型、デフォルト値、説明を含むすべてのプロパティ
• すべてのイベント（Change、Open、Close、Focus、Blur、Cleared、ItemRender、Created、Destroyed）
• CSS クラスのリファレンステーブル
• MaskPlaceholder のサブプロパティ
• タグヘルパー属性の構文全体

---

クイックスタート

1. NuGet パッケージをインストールします：

Install-Package Syncfusion.EJ2.AspNet.Core

2. ~/Pages/_ViewImports.cshtml でタグヘルパーを登録します：

@addTagHelper *, Syncfusion.EJ2

3. ~/Pages/Shared/_Layout.cshtml に CSS とスクリプトを追加します：

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

4. <body> の末尾にスクリプトマネージャーを追加します：

<ejs-scripts></ejs-scripts>

5. TimePicker をレンダリングします：

<ejs-timepicker id="timepicker"></ejs-timepicker>

---

よくあるパターン

値、最小時刻、最大時刻を指定した TimePicker

@{
    var minVal = new DateTime(2022, 05, 07, 1, 00, 00);
    var maxVal = new DateTime(2022, 05, 07, 11, 00, 00);
    var value  = new DateTime(2022, 05, 07, 4, 00, 00);
}
<ejs-timepicker id="timepicker" value="value" min="minVal" max="maxVal"></ejs-timepicker>

カスタム書式とステップ

@{
    var value = new DateTime(2022, 05, 07, 4, 00, 00);
}
<ejs-timepicker id="timepicker" format="HH:mm" step="60" value="value"></ejs-timepicker>

厳密モード

<ejs-timepicker id="timepicker"
    value="@ViewBag.value"
    min="@ViewBag.minVal"
    max="@ViewBag.maxVal"
    strictMode="true">
</ejs-timepicker>

マスク入力

<ejs-timepicker id="timepicker" enableMask="true"></ejs-timepicker>

RTL（右から左）

<ejs-timepicker id="timepicker" placeholder="Select a time" enableRtl="true"></ejs-timepicker>