syncfusion-aspnetcore-datepicker

ASP.NET Core での DatePicker の実装

DatePicker は、高度な機能を備えた日付選択用のグラフィカルユーザーインターフェイスコントロールです。日付範囲の制約、カスタム書式、ポップアップカレンダー、キーボード操作、イベント処理、グローバリゼーションへの対応などを利用して、ユーザーが日付の値を選択または入力できます。このスキルでは、Syncfusion の Tag Helper 構文を使用して ASP.NET Core アプリケーションに DatePicker を実装する方法を説明します。

このスキルを使用する場面

次のような場合に、このスキルを使用してください。

• カレンダーのポップアップから日付を選択できる入力フィールドを作成する
• 日付範囲の制約（最小／最大日付）を実装する
• カスタムの日付書式パターン（yyyy-MM-dd、dd/MM/yyyy など）に対応する
• 複数の日付書式でのユーザー入力を受け付ける
• Strict モードで日付を検証する
• 日付の選択や操作に関するイベントに応答する
• カルチャ固有の書式で日付を表示する
• 右から左に記述する言語（アラビア語、ヘブライ語、ペルシャ語）に対応する
• DatePicker の外観をスタイル設定してカスタマイズする
• DatePicker を ASP.NET Core のモデルバインディングと連携する
• 予約システム、スケジュール管理、登録フォームを構築する
• WCAG 2.2 レベル AA 規格に準拠したアクセシブルなフォームを実装する

主な機能

機能	使用例
ポップアップカレンダー	月／年を移動して日付を視覚的に選択
日付範囲	最小／最大の制約と自動検証
カスタム書式	yyyy-MM-dd、dd/MM/yyyy、MM/dd/yyyy などの形式で日付を表示
入力書式	ユーザーが柔軟に入力できるよう複数の入力パターンを受け付ける
Strict モード	日付を厳密に検証し、無効な入力を制限
キーボード操作	アクセシビリティに対応した矢印キー、Enter、Tab、Escape
イベント	Created、Change、Blur、Focus、Open、Close のイベントハンドラー
モデルバインディング	ASP.NET Core の DateTime プロパティとの双方向バインディング
グローバリゼーション	150 以上のカルチャ固有の日付書式に対応
ローカライズ	ポップアップのプレースホルダーやボタンのテキストを翻訳
RTL 対応	アラビア語、ヘブライ語、ペルシャ語向けの右から左へのテキスト表示
スタイル設定	テーマ（Fluent、Bootstrap）と連携した CSS のカスタマイズ
読み取り専用状態	ユーザーが操作できない表示専用モード
無効状態	特定の日付または DatePicker 全体を無効化

ドキュメントのナビゲーションガイド

はじめに

📄 参照先: references/getting-started.md

• 前提条件とシステム要件
• Syncfusion.EJ2.AspNet.Core NuGet パッケージのインストール
• _ViewImports.cshtml への Tag Helpers の追加
• CDN 経由でのスタイルシートとスクリプトリソースの追加
• スクリプトマネージャーの登録
• Tag Helper を使用した最初の DatePicker の作成
• ASP.NET Core の DateTime モデルへのバインディング
• Tag Helper の属性と構文のリファレンス

日付の書式と解析

📄 参照先: references/date-formats-and-parsing.md

• 標準的な日付書式パターン（yyyy-MM-dd、dd/MM/yyyy）
• カスタムの日付書式文字列の作成
• 柔軟な入力に対応する入力書式パターン
• ロケール固有の日付解析と表示
• 実際の書式パターンを使用した書式変換の例
• 端のケース：月の境界、うるう年、DST
• 日付の検証とエラー処理

日付範囲と検証

📄 参照先: references/date-ranges-and-validation.md

• 最小日付と最大日付の制約の設定
• 境界の自動チェックによる範囲検証
• 特定の日付や日付範囲の無効化
• Strict モードの適用と検証の動作
• 範囲外の日付の処理
• 実際の検証パターン（生年月日、予約、契約日）
• 端のケースと境界条件

イベントとインタラクション

📄 読む： references/events-and-interactions.md

• Created イベントの初期化とセットアップ
• 日付選択の処理に使用する Change イベント
• 入力状態を扱う Blur イベントと Focus イベント
• ポップアップの Open イベントと Close イベント
• 日付選択時にポップアップが閉じるのを防止する方法
• イベントハンドラーのパラメーターとデータ
• カスタムのインタラクションパターンとワークフロー

グローバリゼーションとローカライゼーション

📄 読む： references/globalization-localization.md

• 文化圏固有の日付形式（en-US、de-DE、fr-FR など）
• CLDR データとロケール設定
• RTL（右から左）言語のサポート
• 複数言語での日付表示
• 地域ごとのカレンダーに関する考慮事項
• タイムゾーンの処理と日付変換
• アプリケーションでの動的な文化圏の切り替え

スタイリングと外観

📄 読む： references/styling-and-appearance.md

• CSS クラスのカスタマイズとスタイリングパターン
• テーマとの統合（Fluent、Bootstrap、Material、Tailwind）
• 読み取り専用状態と無効状態のスタイリング
• プレースホルダーとラベルのカスタマイズ
• レスポンシブなポップアップの配置
• 検証状態用のカスタム CSS クラス
• アクセシビリティとフォーカスインジケーターのスタイリング

クイックスタートの例

ASP.NET Core タグヘルパー構文：

// In your Razor Page or Controller View
public class BookingModel : PageModel
{
    [BindProperty]
    public DateTime AppointmentDate { get; set; }
    
    [BindProperty]
    public DateTime StartDate { get; set; }
    
    public void OnPost()
    {
        // Handle form submission with AppointmentDate
    }
}

<form method="post">
    
    <label>Select Appointment Date:</label>
    <ejs-datepicker asp-for="AppointmentDate" 
                     placeholder="Choose a date">
    </ejs-datepicker>
    
    
    <label>Select Travel Start Date:</label>
    <ejs-datepicker id="startDatePicker"
                     asp-for="StartDate" 
                     min="@DateTime.Today" 
                     max="@DateTime.Today.AddDays(30)"
                     format="yyyy-MM-dd"
                     placeholder="mm/dd/yyyy">
    </ejs-datepicker>
    
    <button type="submit" class="e-btn">Book Appointment</button>
</form>

一般的なパターン

パターン 1：日付範囲の選択（生年月日）

<ejs-datepicker id="birthDatePicker"
                 value="@DateTime.Today.AddYears(-25)"
                 min="@DateTime.Today.AddYears(-100)"
                 max="@DateTime.Today"
                 format="MM/dd/yyyy"
                 placeholder="MM/DD/YYYY">
</ejs-datepicker>

パターン 2：複数形式の入力の受け入れ

<ejs-datepicker id="flexibleDatePicker"
                 format="yyyy-MM-dd"
                 input-formats="@new[] { 'yyyy-MM-dd', 'dd/MM/yyyy', 'MM-dd-yyyy' }"
                 placeholder="Enter date (yyyy-MM-dd or dd/MM/yyyy)">
</ejs-datepicker>

パターン 3：イベント駆動型の検証

<ejs-datepicker id="validatedDatePicker"
                 change="onDateChange"
                 placeholder="Select date">
</ejs-datepicker>

<script>
function onDateChange(args) {
    if (args.value) {
        console.log('Selected Date:', args.value);
    }
}
</script>

パターン 4：読み取り専用の表示モード

<ejs-datepicker id="readonlyPicker"
                 value="@ViewData["SubmissionDate"]"
                 readonly="true"
                 format="MMMM dd, yyyy">
</ejs-datepicker>

主なプロパティと属性

プロパティ	型	説明
asp-for	string	ASP.NET Core のモデルプロパティ（DateTime）にバインドします
value	DateTime	初期選択日
min	DateTime	選択可能な最小日付
max	DateTime	選択可能な最大日付
format	string	日付の表示形式パターン
input-formats	string[]	受け入れる入力形式パターン
placeholder	string	入力欄のプレースホルダーテキスト
readonly	bool	日付の編集を無効にします
enabled	bool	コンポーネントを有効または無効にします
strict-mode	bool	厳密な日付検証を適用します
start-view	string	初期カレンダービュー（Month、Year、Decade）

プラットフォーム固有の注意事項

ASP.NET Core タグヘルパー構文

• asp-for 属性を使用してモデルに直接バインドします（id と name を置き換えます）
• ハイフン区切りの属性は C# プロパティに対応します（例：input-formats → InputFormats）
• 自己終了タグ：<ejs-datepicker /> またはコンテンツを含む形式
• 要素 ID を使用して JavaScript からアクセスします

タグヘルパーと HTML ヘルパー

• タグヘルパー（新しく、推奨）：Razor のような構文、インテリセンスのサポート
• HTML ヘルパー（レガシー）：JavaScript の設定を手動で行います
• このスキルでは、ASP.NET Core のベストプラクティスとしてタグヘルパーに焦点を当てます

モデルバインディング

• 自動的な双方向バインディングには asp-for を使用します
• 日付が任意の場合、DateTime プロパティは nullable の DateTime? にする必要があります
• サーバー側の検証でクライアント側の DatePicker 検証を補完します

イベント処理

• 属性構文を使用してイベントをバインドします：change="functionName"
• ハンドラー関数は DatePickerEventArgs パラメーターを受け取ります
• クライアント側（JavaScript）とサーバー側の両方の検証をサポートしています

次のステップ

1. まずはこちらから： はじめに - 最初の DatePicker を設定します
2. 日付を設定する： 日付形式と解析 - カスタム書式
3. 検証を追加する： 日付範囲と検証 - 最小値／最大値の制約
4. 操作を処理する： イベントと操作 - ユーザーの操作に応答します
5. グローバル対応にする： グローバル化とローカライズ - 多言語サポート
6. UI を仕上げる： スタイルと外観 - カスタムテーマ

---

最終更新日： 2026年3月
フレームワークのバージョン： Syncfusion EJ2 24.1.48+
ライセンス： SEE LICENSE IN license