syncfusion-maui-date-time-picker について
Syncfusion SfDateTimePickerを実装する.NET MAUI開発者向けガイドです。日付・時刻の選択、制限、カスタマイズ、ローカライズを扱います。
主な機能
- 01日付・時刻・両方の選択
- 02インライン、ダイアログ、相対ダイアログモード
- 03日付範囲と選択不可時間の制限
- 04書式と選択間隔のカスタマイズ
- 05ローカライズとアクセシビリティ対応
活用シーン
- 01予約や受付の画面作成
- 02選択可能な時間枠の設定
- 03フォームへの日時入力追加
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ syncfusion/ maui-ui-components-skills --skill syncfusion-maui-date-time-pickerインストール後、Claude Code で/syncfusion-maui-date-time-pickerを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/accessibility.mdcustomization.mddate-restriction.mdevents.mdformatting.mdgetting-started.mdintervals.mdlocalization.mdpicker-modes.md詳細
日時ピッカーの実装
Syncfusion .NET MAUI DateTimePicker(SfDateTimePicker)コントロールを実装およびカスタマイズするための包括的なスキルです。このコンポーネントを使うと、豊富なカスタマイズオプションを活用して、日付、時刻、またはその両方を柔軟に選択できます。
このスキルを使用する場面
次のような場合にこのスキルを使用します。
- .NET MAUI アプリに日付と時刻の選択機能を追加する
- 予約またはブッキングシステムを実装する
- 時間枠を備えたスケジュールインターフェイスを作成する
- 日時入力が必要なフォームを構築する
- 時刻選択に対応したカレンダーピッカーを追加する
- 日付範囲の制限を実装する
- ピッカーの外観(ヘッダー、フッター、テーマ)をカスタマイズする
- 選択イベントとデータバインディングを処理する
- 複数の日付/時刻形式をサポートする
- ピッカーのラベルとボタンをローカライズする
- アクセシブルな日時選択を実装する
コンポーネントの概要
SfDateTimePicker は、ユーザーが次の項目を選択できる多用途なピッカーコントロールです。
- 日付のみ - 日、月、年を選択します
- 時刻のみ - 時、分、秒を選択します
- 日付と時刻 - 日付と時刻を組み合わせて選択します
- 書式設定された表示 - 18 種類の日付形式と 9 種類の時刻形式
- 複数の表示モード - インライン、ダイアログ、相対ダイアログ
- 日付の制限 - 最小/最大日付と選択不可の日時
- カスタム間隔 - 日、月、時、分をスキップします
- 完全なカスタマイズ - ヘッダー、フッター、列、選択ビュー
- ローカライズ - 多言語サポート
ドキュメントとナビゲーションガイド
はじめにとインストール
📄 参照: references/getting-started.md
- Syncfusion.Maui.Picker NuGet パッケージのインストール
- MauiProgram.cs でのハンドラーの登録
- 基本的な DateTimePicker の実装(XAML と C#)
- 最初のアプリケーションの実行
- 最小限の動作例
日付と時刻の書式設定
📄 参照: references/formatting.md
- 18 種類の定義済み日付形式(dd_MM_yyyy、yyyy_MM_dd、MMM_dd_yyyy など)
- 9 種類の定義済み時刻形式(h_mm_tt、HH_mm_ss、hh_mm_ss_tt など)
- DateFormat プロパティと TimeFormat プロパティの設定
- カスタム書式の設定
- 書式選択のベストプラクティス
- 表示形式の例
ピッカーモードと表示
📄 参照: references/picker-modes.md
- 既定のモード(インライン表示)
- ダイアログモード(オーバーレイ付きポップアップ)
- RelativeDialog モード(位置を指定できるポップアップ)
- プログラムから制御するための IsOpen プロパティ
- 8 種類の RelativePosition オプション(AlignTop、AlignBottom、AlignTopLeft など)
- ユースケースに応じたモード選択のガイダンス
- プログラムからピッカーを開く方法
カスタマイズ
📄 参照: references/customization.md
- ヘッダーのカスタマイズ(テキスト、区切り線の色、テンプレート)
- HeaderTemplate と HeaderTemplateSelector
- 列ヘッダーのスタイル設定
- フッターのカスタマイズ(OK/Cancel ボタン、テキスト、表示状態)
- 選択ビューの外観
- 背景色とテキストスタイル
- DataTemplate と DataTemplateSelector の例
- 高度なテーマ設定
日付の制限
📄 参照: references/date-restriction.md
- MinimumDate プロパティ(下限の制限)
- MaximumDate プロパティ(上限の制限)
- BlackoutDateTimes(特定の日付と時刻を選択不可にする設定)
- 検証ルール
- ユースケース(祝日、利用不可期間、営業時間)
- 制限のパターンとベストプラクティス
間隔
📄 参照: references/intervals.md
- 日付の間隔(DayInterval、MonthInterval、YearInterval)
- 時刻の間隔(HourInterval、MinuteInterval、SecondInterval、MilliSecondInterval)
- 複数の間隔の組み合わせ
- 予約向けのスキップパターン
- 時間枠の設定(15 分、30 分間隔)
- ユースケースと例
イベント
📄 参照: references/events.md
- SelectionChanged イベント(NewValue、OldValue)
- 即時選択と確定選択(IsSelectionImmediate)
- ダイアログモードのイベント(Opened、Closing、Closed)
- Closing イベントでの選択のキャンセル
- イベント処理のパターン
- イベントを使ったデータバインディング
- MVVM との統合
ローカライズ
📄 参照: references/localization.md
- ローカライズ可能な文字列(Day、Month、Year、Hour、Minute、Second、OK、Cancel)
- CurrentUICulture の設定
- リソースファイル(.resx)の作成
- 複数言語の翻訳の追加
- リソースファイルの構造と命名
- フランス語、スペイン語、その他の言語の例
- 多言語アプリのベストプラクティス
アクセシビリティ
📄 参照: references/accessibility.md
- WCAG 準拠機能
- キーボードナビゲーションのサポート
- スクリーンリーダーとの互換性
- セマンティックプロパティと AutomationId
- フォーカス管理
- アクセシブルな日付/時刻の選択
- アクセシビリティのテスト
コメント
Markdown 対応