syncfusion-maui-date-picker について
Syncfusion の SfDatePicker を実装する .NET MAUI 開発者向けスキルです。表示モード、日付制限、外観、イベント、アクセシビリティ、ローカライズを扱います。
主な機能
- 01日付形式と表示モード
- 02日付範囲と選択不可日の設定
- 03ピッカーの外観とレイアウト調整
- 04選択・ダイアログ・ボタンのイベント
- 05キーボード操作とローカライズ
活用シーン
- 01.NET MAUI アプリへの日付選択追加
- 02選択できる日付範囲の制限
- 03日付選択ダイアログのスタイル調整
- 04多言語アプリ向けの日付選択設定
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ syncfusion/ maui-ui-components-skills --skill syncfusion-maui-date-pickerインストール後、Claude Code で/syncfusion-maui-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/キャンセル操作に応答する
- ピッカーモードを設定する - Dialog、RelativeDialog、Default の表示モードを使用する
- 間隔を追加する - 選択する日、月、年の間隔を設定する
- アクセシビリティを有効にする - キーボード操作とローカライズに対応する
- 最新のエフェクトを適用する - リキッドグラスエフェクト(.NET 10 以降)を実装する
コンポーネントの概要
主な機能:
- 日付選択 - 日、月、年の列を備えたインタラクティブな日付ピッカー
- 複数の書式 - 事前定義された 20 種類以上の日付書式(dd/MM/yyyy、MM/dd/yyyy など)
- ピッカーモード - Dialog、位置をカスタマイズできる 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
- Dialog モード(ポップアップ表示)
- 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)
- リキッドグラス効果の統合
- SfGlassEffectView の設定
- EnableLiquidGlassEffect プロパティ
- プラットフォーム要件(.NET 10、macOS 26+、iOS 26+)