mcpField
S
syncfusion-maui-date-time-picker

syncfusion-maui-date-time-picker

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

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

Syncfusion SfDateTimePickerを実装する.NET MAUI開発者向けガイドです。日付・時刻の選択、制限、カスタマイズ、ローカライズを扱います。

主な機能

  1. 01日付・時刻・両方の選択
  2. 02インライン、ダイアログ、相対ダイアログモード
  3. 03日付範囲と選択不可時間の制限
  4. 04書式と選択間隔のカスタマイズ
  5. 05ローカライズとアクセシビリティ対応

活用シーン

  1. 01予約や受付の画面作成
  2. 02選択可能な時間枠の設定
  3. 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.md
customization.md
date-restriction.md
events.md
formatting.md
getting-started.md
intervals.md
localization.md
picker-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
  • フォーカス管理
  • アクセシブルな日付/時刻の選択
  • アクセシビリティのテスト

コメント