mcpField
S
syncfusion-maui-toolkit-date-picker

syncfusion-maui-toolkit-date-picker

github.com/syncfusionデザイン・UI3944 回インストール7 週間前に更新
リポジトリ

syncfusion-maui-toolkit-date-picker について

このスキルは、.NET MAUI アプリで Syncfusion SfDatePicker を実装、カスタマイズする開発者向けです。日付形式、表示モード、日付制限、イベント、アクセシビリティ、ローカライズを扱います。

主な機能

  1. 01日・月・年の選択
  2. 02定義済み形式とカスタム形式
  3. 03ダイアログと相対ダイアログモード
  4. 04日付範囲と選択不可日の設定
  5. 05スタイル、イベント、コマンドの設定
  6. 06キーボード操作とローカライズ

活用シーン

  1. 01.NET MAUI フォームへの日付入力追加
  2. 02予約日の制限や特定日の選択禁止
  3. 03ピッカーの外観とポップアップ位置の調整
  4. 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.md
advanced-features.md
customizations.md
date-restrictions.md
events-and-commands.md
formatting.md
getting-started.md
intervals-and-looping.md
picker-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+)

コメント