syncfusion-maui-toolkit-date-picker について
このスキルは、.NET MAUI アプリで Syncfusion SfDatePicker を実装、カスタマイズする開発者向けです。日付形式、表示モード、日付制限、イベント、アクセシビリティ、ローカライズを扱います。
主な機能
- 01日・月・年の選択
- 02定義済み形式とカスタム形式
- 03ダイアログと相対ダイアログモード
- 04日付範囲と選択不可日の設定
- 05スタイル、イベント、コマンドの設定
- 06キーボード操作とローカライズ
活用シーン
- 01.NET MAUI フォームへの日付入力追加
- 02予約日の制限や特定日の選択禁止
- 03ピッカーの外観とポップアップ位置の調整
- 04多言語対応のキーボード操作可能な日付選択
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ syncfusion/ maui-toolkit-ui-components-skills --skill syncfusion-maui-toolkit-date-pickerインストール後、Claude Code で/syncfusion-maui-toolkit-date-pickerを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/accessibility-localization.mdadvanced-features.mdcustomizations.mddate-restrictions.mdevents-and-commands.mdformatting.mdgetting-started.mdintervals-and-looping.mdpicker-modes.md詳細
Syncfusion .NET MAUI DatePicker(SfDatePicker)の実装
Syncfusion .NET MAUI DatePicker(SfDatePicker)コントロールでは、視覚的に豊かでカスタマイズ可能なピッカーインターフェイスを使って日付を選択できます。このコントロールは、ダイアログモードとドロップダウンモードに対応しており、幅広いカスタマイズオプション、日付制限、書式設定、ローカライズ、アクセシビリティ機能を備えています。
このスキルを使用する場面
次のような場合に、このスキルを使用してください。
- 日付選択を実装する - .NET MAUI アプリケーションに日付ピッカーコントロールを追加します
- 日付を書式設定する - さまざまな形式(定義済みのオプションが20種類以上)で日付を表示します
- 日付選択を制限する - 最小日付/最大日付を設定し、特定の日付を選択不可にします
- 外観をカスタマイズする - ヘッダー、フッター、列ヘッダー、選択ビューのスタイルを設定します
- 日付イベントを処理する - 日付の選択、ダイアログの開閉、OK/キャンセル操作に応答します
- ピッカーモードを設定する - ダイアログ、RelativeDialog、またはDefaultの表示モードを使用します
- 間隔を追加する - 選択する日、月、年の間隔を設定します
- アクセシビリティを有効にする - キーボード操作とローカライズに対応します
コンポーネントの概要
主な機能:
- 日付選択 - 日、月、年の列を備えたインタラクティブな日付ピッカー
- 複数の書式 - 定義済みの日付書式が20種類以上(dd/MM/yyyy、MM/dd/yyyyなど)
- ピッカーモード - ダイアログ、カスタマイズ可能な位置に表示するRelativeDialog
- カスタマイズ - ヘッダー、フッター、列ヘッダー、選択ビュー、色、フォント
- 日付制限 - 最小日付/最大日付、選択不可日付のコレクション
- 間隔 - カスタム日付範囲のための日、月、年の間隔
- イベントとコマンド - SelectionChanged、ダイアログイベント、フッターボタンイベント
- アクセシビリティ - キーボード操作、スクリーンリーダーのサポート、ローカライズ
- 高度な機能 - テキスト表示モード(Fade、Shrink)
ドキュメントとナビゲーションガイド
はじめに
📄 参照: references/getting-started.md
- インストールとNuGetパッケージの設定
- MauiProgram.csでのハンドラー登録
- DatePickerの基本的な実装(XAMLとC#)
- ヘッダー、フッター、高さ、幅の設定
- SelectedDateプロパティと選択のクリア
日付の書式設定
📄 参照: references/formatting.md
- 定義済みの日付書式が20種類以上
- Formatプロパティの使用方法
- 一般的な書式パターン(dd_MM_yyyy、MM_dd_yyyyなど)
- カスタム書式の例
ピッカーモードと表示
📄 参照: references/picker-modes.md
- ダイアログモード(ポップアップ表示)
- RelativeDialogモード(ビューを基準とした位置に表示)
- 8種類の相対位置(AlignTop、AlignBottomなど)
- プログラムから制御するIsOpenプロパティ
- カスタムポップアップサイズ(PopupWidth、PopupHeight)
カスタマイズとスタイル設定
📄 参照: references/customizations.md
- ヘッダーのカスタマイズ(テキスト、区切り線、背景、テンプレート)
- 列ヘッダーのカスタマイズ(日、月、年のヘッダー)
- フッターのカスタマイズ(OK/キャンセルボタン)
- 選択ビューのカスタマイズ(角の半径、ストローク、パディング)
- 列の区切り線の色
- 閉じるボタンとアイコン
- 列ごとのテキストスタイルと幅
- DataTemplateSelectorのサポート
日付の制限
📄 参照: references/date-restrictions.md
- MinimumDateプロパティ
- MaximumDateプロパティ
- BlackoutDatesコレクション
- 日付範囲の検証
- 範囲外の日付選択の防止
間隔とループ
📄 参照: references/intervals-and-looping.md
- DayIntervalプロパティ
- MonthIntervalプロパティ
- YearIntervalプロパティ
- EnableLoopingによるシームレスな移動
イベントとコマンド
📄 参照: references/events-and-commands.md
- SelectionChangedイベント(NewValue、OldValue)
- ダイアログモードのイベント(Opened、Closing、Closed)
- フッターイベント(OkButtonClicked、CancelButtonClicked)
- SelectionChangedCommand、AcceptCommand、DeclineCommand
- イベント処理のパターン
アクセシビリティとローカライズ
📄 参照: references/accessibility-localization.md
- ヘッダー、フッター、ピッカー項目のアクセシビリティ機能
- キーボード操作(Tab、Enter、矢印キー)
- ローカライズの設定とリソースファイル
- CurrentUICulture の設定
- 多言語サポート
高度な機能
📄 参照: references/advanced-features.md
- テキストの表示モード(Default、Fade、Shrink、FadeAndShrink)
- プラットフォーム要件(.NET 10、macOS 26+、iOS 26+)