syncfusion-javascript-calendars

Syncfusion JavaScript（EJ2）カレンダーの実装

カレンダー

Syncfusion EJ2 Calendar は、高度にカスタマイズ可能なカレンダー UI コントロールで、ユーザーは単一または複数の日付を選択できます。複数のビュー（月、年、年代）、ナビゲーション、週番号、無効な日付、カスタム日付セルのレンダリング、ローカライズ、RTL サポート、および完全なアクセシビリティ（WCAG 2.2 準拠）に対応しています。

クイックスタート（TypeScript）

インストール

npm install @syncfusion/ej2-calendars @syncfusion/ej2-base
npm audit

基本的な例

<div id="calendar"></div>

import { Calendar } from '@syncfusion/ej2-calendars';

const calendar = new Calendar({
  value: new Date(),
  change: (args: any) => {
    console.log('Selected date:', args.value);
  }
});

calendar.appendTo('#calendar');

注意：

• 選択した日付の変更に応答するには、change イベントを使用します。
• コントロールのスタイルを設定するには、テーマ CSS をインポートします。
• React の状態管理は不要です。EJ2 が内部状態を処理します。

ガイダンスとパターン

• 制御コンポーネント： calendar.value プロパティで現在の値にアクセスし、change イベントを監視します。
• 複数選択： isMultiSelection: true と values プロパティ、および addDate()／removeDate() メソッドを使用します。
• プログラムによるナビゲーション： navigateTo(view, date) メソッドを呼び出します。両方の引数が必要です。
• 日付範囲： 範囲を選択するには、DateRangePicker（別のコンポーネント）を使用します。Calendar には、範囲を組み込みでハイライトするモードはありません。
• アクセシビリティ： Calendar は ARIA 属性を自動的に処理します。必要に応じて、追加のコンテキストを提供するために role="region" を持つラッパー要素を使用します。
• 週番号： weekNumber: true プロパティで有効にします。

リファレンス

現在のタスクに該当するリファレンスを参照してください。

はじめに

📄 参照： references/calendar-getting-started.md

• インストールと npm のセットアップ
• TypeScript コンポーネントの例
• CSS／テーマのインポート
• メソッドとイベント処理の使用

日付の選択

📄 参照： references/calendar-date-selection.md

• 単一の日付の選択
• 複数の日付と範囲
• 最小値／最大値の制約
• 特定の日付の無効化

カレンダービュー

📄 参照： references/calendar-calendar-views.md

• 月、年、年代のビュー
• ビュー間の移動
• 初期値と深度の制御
• プログラムによるナビゲーション

スタイル設定とカスタマイズ

📄 参照： references/calendar-styling-and-customization.md

• テーマの選択と切り替え
• CSS クラスのカスタマイズ
• カスタム日付セルのレンダリング
• RTL とレスポンシブデザイン

イベントとメソッド

📄 参照： references/calendar-events-and-methods.md

• イベントハンドラー（change、created、renderDayCell）
• メソッドの使用（navigateTo、addDate、removeDate）
• 高度な renderDayCell フック
• イベント追跡のパターン

アクセシビリティとグローバル化

📄 参照： references/calendar-accessibility-and-globalization.md

• WCAG 2.1 準拠
• キーボードナビゲーション
• ARIA 属性
• ロケール対応と RTL

API リファレンス（クイック参照）

📄 参照： references/calendar-api-reference.md

• プロパティ、イベント、メソッドの概要
• よく使われる列挙型と型
• 上流ドキュメントへのリンク

トラブルシューティングとヒント

• スタイルが適用されない： CSS のインポート先が node_modules/@syncfusion/ej2-calendars/styles/ であり、コンポーネントの初期化前に読み込まれていることを確認します。
• 値が更新されない： コンポーネントの状態を更新するには、change イベントを使用します。EJ2 コンポーネントは自動バインディングではなく、イベントを通じて変更を通知します。
• 複数の日付を選択できない： isMultiSelection: true を設定し、初期値には values 配列プロパティを使用してください。
• navigateTo が機能しない： このメソッドには2つの引数が必要です — navigateTo(view: CalendarView, date: Date)。
• 「Cannot find module」： npm install @syncfusion/ej2-calendars @syncfusion/ej2-base を実行し、package.json を確認します。
• 週番号が表示されない： weekNumber: true を使用します（showWeekNumber ではありません）。

日付ピッカー

Syncfusion EJ2 DatePicker は、単一の日付を選択するためのカレンダーポップアップを備えた直感的な入力コントロールです。柔軟な書式設定、マスク入力、最小日付／最大日付の検証、厳密モード、複数の入力形式、日付のカスタムレンダリング、ローカライズ、フォームとのシームレスな連携に対応しています。

コンポーネントの概要

DatePicker は、日付選択のための強力な機能を備えた Syncfusion EJ2 コンポーネントです。

• カレンダーポップアップ - ナビゲーション機能を備えた視覚的な日付選択
• 柔軟な書式設定 - パターンに対応した表示形式と入力形式
• マスク入力 - enableMask を使用した、maskPlaceholder によるセグメントごとの日付入力
• 範囲検証 - strictMode による自動修正に対応した最小日付／最大日付
• 複数のビュー - start プロパティと depth プロパティによる月、年、10 年単位のビュー
• 日付セルのカスタマイズ - renderDayCell イベントによる週末の無効化や特定の日付の強調表示
• 完全なグローバル化対応 - 150 以上のカルチャ、RTL（enableRtl）、ロケール固有の書式設定、firstDayOfWeek
• WCAG 2.2 準拠 - キーボードナビゲーションと ARIA 属性による完全なアクセシビリティ
• フォーム対応 - DOM への直接バインド、イベント駆動型の更新、フォーム検証との連携
• プログラムによる制御 - show()、hide()、focusIn()、focusOut()、navigateTo()、currentView()

API の概要

主なプロパティ

プロパティ	型	既定値	説明
value	Date	null	選択した日付
min	Date	1900-01-01	選択可能な最小日付
max	Date	2099-12-31	選択可能な最大日付
format	string	null	表示形式（例："dd/MM/yyyy"）
inputFormats	string[]	null	受け付ける入力形式の配列
placeholder	string	null	入力欄のプレースホルダーテキスト
enabled	boolean	true	コンポーネントの有効化／無効化
readonly	boolean	false	読み取り専用状態
allowEdit	boolean	true	入力テキストボックスの編集を許可
strictMode	boolean	false	範囲外の日付を自動修正
showClearButton	boolean	true	クリアボタンの表示／非表示
showTodayButton	boolean	true	今日ボタンの表示／非表示
start	CalendarView	Month	初期ビュー："Month"、"Year"、"Decade"
depth	CalendarView	Month	最も詳細なナビゲーションレベル
enableMask	boolean	false	日付のマスク入力を有効化
maskPlaceholder	object	{...}	マスク入力用のセグメントプレースホルダー
enableRtl	boolean	false	右から左へのレンダリング
locale	string	''	カルチャ／ロケールコード
firstDayOfWeek	number	0	週の開始曜日（0=日曜日）
weekNumber	boolean	false	週番号を表示
weekRule	WeekRule	FirstDay	年の最初の週の規則
calendarMode	CalendarType	Gregorian	暦の種類（グレゴリオ暦またはイスラム暦）
dayHeaderFormat	DayHeaderFormats	Short	ヘッダー内の曜日名の形式
floatLabelType	FloatLabelType	Never	フローティングラベルの動作
fullScreenMode	boolean	false	モバイルでポップアップを全画面表示
openOnFocus	boolean	false	入力欄にフォーカスしたときにポップアップを開く
serverTimezoneOffset	number	null	サーバーのタイムゾーンオフセット
cssClass	string	null	カスタム CSS クラス
htmlAttributes	object	{}	追加の HTML 属性
keyConfigs	object	null	カスタムキー操作のマッピング
width	string | number	null	コンポーネントの幅
zIndex	number	1000	ポップアップの z-index
enablePersistence	boolean	false	再読み込み後も状態を保持

メソッド

メソッド	戻り値	説明
show()	void	カレンダーのポップアップを開きます
hide()	void	カレンダーのポップアップを閉じます
focusIn()	void	コンポーネントにフォーカスを設定します
focusOut()	void	コンポーネントからフォーカスを外します
navigateTo(view, date)	void	指定したビューと日付に移動します
currentView()	string	現在のカレンダービュー名を返します
getPersistData()	string	永続化された状態データを取得します
destroy()	void	コンポーネントを破棄します

イベント

イベント	引数の型	説明
change	ChangedEventArgs	選択した日付が変更されたときに発生します
focus	FocusEventArgs	入力欄にフォーカスが当たったときに発生します
blur	BlurEventArgs	入力欄からフォーカスが外れたときに発生します
open	PopupEventArgs	ポップアップが開いたときに発生します
close	PopupEventArgs	ポップアップが閉じたときに発生します
cleared	ClearedEventArgs	値がクリアされたときに発生します
created	Object	コンポーネントが作成されたときに発生します
destroyed	Object	コンポーネントが破棄されたときに発生します
navigated	NavigatedEventArgs	カレンダービューが移動したときに発生します
renderDayCell	RenderDayCellEventArgs	各日のセルが描画されたときに発生します

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

DatePickerについて知りたい場合は、適切なリファレンスをご案内します。

はじめに

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

• npm によるインストール（@syncfusion/ej2-calendars）
• CSS テーマのインポート（material3、bootstrap、fluent、tailwind）
• コンポーネントのインポートとセットアップ
• TypeScript による基本的な実装
• 最初のアプリケーションの実行

日付形式と入力

📄 参照: references/datepicker-date-formats-and-input.md

• 表示形式のプロパティとパターン（yyyy-MM-dd、dd/MM/yyyy など）
• カスタム形式指定子（# および 0 のパターン）
• 柔軟な日付入力のための入力形式（複数の形式に対応）
• 実際の使用例を含む形式の例
• ユーザー入力の解析と自動変換
• カルチャに基づく既定の形式

日付範囲と検証

📄 参照: references/datepicker-date-range-and-validation.md

• 範囲を制限する最小日付と最大日付のプロパティ
• 範囲の検証とエラー状態
• 範囲外の日付を自動修正する strictMode
• 範囲外の場合の動作とエラー処理
• 有効な範囲外の日付を無効にする
• エッジケースと注意点

日付ビューとナビゲーション

📄 参照: references/datepicker-date-views-and-navigation.md

• 初期ビューの start プロパティ（月、年、 दशक）
• ビューレベルを制限する depth プロパティ
• カレンダーのナビゲーションとユーザー操作
• 月と年を選択するショートカット
• 異なるビュー間の移動
• 既定の動作とベストプラクティス

カスタマイズとスタイル設定

📄 参照: references/datepicker-customization-and-styling.md

• スタイル設定用の CSS クラス（e-datepicker、e-calendar、e-day など）
• 日付をカスタマイズする renderDayCell イベント
• 特定の日付と週末を無効にする
• プレースホルダー、無効、読み取り専用の状態
• カスタム CSS とテーマのカスタマイズ
• 日付セルの外観と動作

グローバル化とローカライズ

📄 参照: references/datepicker-globalization-and-localization.md

• カルチャとロケールの設定（ドイツ語、フランス語、アラビア語など）
• 国際化のための CLDR データの読み込み
• カルチャごとの日付形式（国によって異なる形式）
• ロケールテキストのカスタマイズ（今日ボタン、プレースホルダー）
• アラビア語、ヘブライ語、ウルドゥー語の右から左（RTL）サポート
• カルチャごとの週の開始曜日
• 数値形式とカレンダーの調整

アクセシビリティとキーボードナビゲーション

📄 参照： references/datepicker-accessibility-and-keyboard.md

• WCAG 2.2 準拠とアクセシビリティ基準
• キーボードナビゲーションのショートカット（Alt+Down、矢印キー、Esc）
• ARIA 属性（aria-expanded、aria-disabled、aria-activedescendant）
• スクリーンリーダーのサポートと通知
• フォーカス管理と視認可能なフォーカスインジケーター
• 色のコントラストと視覚的なアクセシビリティ
• モバイルデバイスのサポート

日付のマスキングと高度な検証

📄 参照： references/datepicker-date-masking-and-strict-mode.md

• 構造化されたセグメント単位の日付入力を行うenableMaskプロパティ
• セグメントのプレースホルダーテキストをカスタマイズするmaskPlaceholder
• 入力をガイドする日付マスキングパターン
• strictModeプロパティの動作と適用
• 日付の解析ルールと検証ロジック
• 入力の検証とフォーマットの適用
• エッジケース（うるう年、月の境界など）
• よくある検証の問題のトラブルシューティング
• 日付入力のベストプラクティス

クイックスタートの例

開始するための最小限の動作例を示します。

<input id="datepicker" type="text" />

import { DatePicker } from '@syncfusion/ej2-calendars';

const datepicker = new DatePicker({
  value: new Date(),
  change: (e: any) => {
    console.log('Selected date:', e.value);
  },
  placeholder: 'Enter date'
});

datepicker.appendTo('#datepicker');

要点：

• @syncfusion/ej2-calendarsからDatePickerをインポートします
• new DatePicker({...})でインスタンスを作成します
• appendTo()を使用して、対象のDOM要素にレンダリングします
• 日付の選択に応じて処理するには、changeイベントを使用します
• DatePickerは、クリックまたはAlt+Downキーでカレンダーポップアップを開きます

DateRangePicker

Syncfusion EJ2 DateRangePickerを使用すると、プリセット、検証、カスタム書式、区切り文字の設定、モバイル向け全画面モード、高度な範囲制約（minDays、maxDays、min、max）に標準で対応しながら、開始日と終了日の範囲を選択できます。

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

はじめに

📄 参照： references/daterangepicker-getting-started.md

• npmによるインストール（@syncfusion/ej2-calendars）
• CSSのインポートとテーマの設定
• DateRangePickerの基本的な実装
• TypeScriptコンポーネントの設定
• 開発サーバーの起動
• よくあるトラブルシューティング

日付範囲の選択

📄 参照： references/daterangepicker-date-range-selection.md

• 開始日と終了日のプロパティ
• 日付範囲の検証パターン
• 最小日付と最大日付の制約
• 無効な日付の設定
• 日付範囲のプリセット（過去7日間、過去30日間など）
• 値のバインディングと双方向更新
• 読み取り専用状態と無効状態
• プレースホルダーとラベル

日付範囲の書式設定

📄 参照： references/daterangepicker-date-range-formatting.md

• 日付書式文字列のオプション（MM/dd/yyyy、dd-MMM-yyyyなど）
• 表示形式と入力形式
• ロケールに基づく日付書式設定
• 開始日と終了日の間のカスタム区切り文字
• フロートラベルの種類（Never、Always、Auto）
• プレースホルダーテキストのカスタマイズ
• DOM属性用のhtmlAttributes

イベントとメソッド

📄 参照： references/daterangepicker-events-and-methods.md

• イベントハンドラー（change、open、close、blur、focus、select）
• イベント引数の構造
• メソッド（show、hide、focusIn、focusOut、reset、destroy）
• コンポーネントインスタンスを使ったメソッドの直接呼び出し
• ライフサイクルイベント（created、destroyed）
• イベントパターンとベストプラクティス
• 値のクリアと状態のリセット
• DateRangeSelectingEventとChangedEventArgs

カスタマイズとスタイル設定

📄 参照： references/daterangepicker-customization-and-styling.md

• cssClassを使ったCSSクラスのカスタマイズ
• テーマのオプション（Material、Bootstrap、Fluent、Tailwind、Fabric）
• モバイルデバイス向けの全画面モード
• RTL（右から左へ記述する言語）のサポート
• プリセット範囲のカスタマイズ
• Z-indexの管理
• 幅と高さの設定
• アクセシビリティ機能とARIA属性

API リファレンス

📄 参照： references/daterangepicker-api-reference.md

• プロパティの全一覧（35 件以上）
• シグネチャ付きの全メソッド（8 件）
• イベント引数を含む全イベント（12 件）
• 型定義とインターフェイス
• デフォルト値と制約
• 各プロパティとメソッドのユースケース

高度なパターン

📄 参照： references/daterangepicker-advanced-patterns.md

• 日付範囲の検証を伴うフォーム送信
• キーボードショートカットとキー操作によるナビゲーション
• サーバーのタイムゾーンオフセット処理
• 永続化とlocalStorage
• 複数コンポーネントの連携（開始日と終了日のバインディング）
• 遅延読み込みによるパフォーマンス最適化
• エラー処理と検証のパターン
• 複雑な日付範囲のシナリオ（会計年度、四半期）

クイックスタート

<input id="daterangepicker" type="text" />

import { DateRangePicker } from '@syncfusion/ej2-calendars';

const drp = new DateRangePicker({
  placeholder: 'Select a range',
  change: (e: any) => {
    console.log('Start:', e.startDate, 'End:', e.endDate);
  }
});

drp.appendTo('#daterangepicker');

一般的なパターン

パターン 1：最小値／最大値制約付きの日付範囲

const drp = new DateRangePicker({
  placeholder: 'Select a range in 2026',
  min: new Date(2026, 0, 1),
  max: new Date(2026, 11, 31),
  change: (e: any) => {
    console.log('Range:', e.startDate, '-', e.endDate);
  }
});

drp.appendTo('#drp');

パターン 2：プリセット付きの日付範囲

const drp = new DateRangePicker({
  placeholder: 'Select reporting period',
  presets: [
    { label: 'Today', start: new Date(), end: new Date() },
    { label: 'Last 7 Days', start: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), end: new Date() },
    { label: 'Last 30 Days', start: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), end: new Date() }
  ]
});

drp.appendTo('#drp');

DateTimePicker

Syncfusion EJ2 DateTimePicker は、日付と時刻の選択を 1 つのコントロールにまとめたものです。カレンダーと時刻リストのポップアップ、カスタマイズ可能な時刻間隔、マスキング、厳密な検証、タイムゾーン処理、書式のカスタマイズ、完全なキーボードアクセシビリティを備えています。

ドキュメント（以下の順に参照してください）

• 📄 参照：references/datetimepicker-getting-started.md — インストール、モジュールの設定、CSS のインポート、基本的な使い方
• 📄 参照：references/datetimepicker-api-reference.md — すべてのプロパティ、メソッド、イベント
• 📄 参照：references/datetimepicker-date-time-selection.md — 選択パターンと制約
• 📄 参照：references/datetimepicker-time-configuration.md — step、minTime/maxTime、スクロール動作
• 📄 参照：references/datetimepicker-events-and-methods.md — イベントハンドラーとメソッドの使い方
• 📄 参照：references/datetimepicker-styling-and-customization.md — テーマとcssClassの使い方
• 📄 参照：references/datetimepicker-advanced-features.md — マスク入力、厳密モード、カレンダーモード、タイムゾーン処理
• 📄 参照：references/datetimepicker-accessibility.md — キーボードとARIAに関するガイダンス

クイックスタート（TypeScript）

1. パッケージをインストールします。

npm install @syncfusion/ej2-calendars
npm audit

2. スタイルをインポートします（index.cssまたはコンポーネントの CSS 内）。

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material3.css';

3. 最小限の例：

<input id="datetimepicker" type="text" />

import { DateTimePicker } from '@syncfusion/ej2-calendars';

const picker = new DateTimePicker({
  value: new Date(),
  format: 'dd/MM/yyyy hh:mm a',
  step: 15,
  placeholder: 'Select date and time',
  change: (args: any) => {
    console.log('Selected:', args.value);
  }
});

picker.appendTo('#datetimepicker');

一般的なパターン

• 値の直接バインディング：valueプロパティを設定し、changeイベントを監視します。
• 範囲の制限：日付にはmin、maxを、時刻にはminTime／maxTimeを使用します。
• マスク入力：enableMaskを有効にし、maskPlaceholderを指定します。
• ローカライズ：地域に応じた書式設定にはlocaleプロパティを設定します。
• キーボード優先：カスタムショートカットにはkeyConfigsを指定します。

主なプロパティの概要（全一覧は API リファレンスを参照してください）

• value、min、max、step、format、enableMask、placeholder、cssClass、locale、readonly、enabled。

主なイベント

• change、open、close、created、destroyed、navigated、blur、focus、renderDayCell。

TimePicker

Syncfusion EJ2 TimePicker は、時刻を選択するための軽量で多機能なコントロールです。12 時間／24 時間形式、時刻の間隔設定、最小値／最大値の制約、マスク入力、ローカライズ、全画面モードに対応し、HTML フォームにも簡単に統合できます。

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

はじめに

📄 読む： references/timepicker-getting-started.md

• npm（@syncfusion/ej2-calendars）を使用したインストール
• CSS のインポートとテーマの設定
• TimePicker の基本的な実装
• コンポーネントの登録
• 開発サーバーの起動
• よくあるトラブルシューティング

時刻の書式と表示

📄 読む： references/timepicker-time-format-and-display.md

• 書式文字列のオプション（24 時間形式、12 時間形式）
• skeleton プロパティを持つ TimeFormatObject
• ロケールに基づく時刻の書式設定
• プレースホルダーテキストのカスタマイズ
• フローティングラベルの種類（Never、Always、Auto）
• DOM 属性に対する htmlAttributes
• enableMask によるマスク入力
• マスクプレースホルダーの設定

時刻の範囲と選択

📄 読む： references/timepicker-time-range-and-selection.md

• 最小時刻と最大時刻の制約
• 時刻の間隔（15、30、60 分）
• ScrollTo のデフォルト位置
• 値のバインドと双方向更新
• 読み取り専用状態と無効状態
• OpenOnFocus の動作
• 時刻ポップアップリストの生成
• 時刻の間隔設定

イベントとメソッド

📄 読む： references/timepicker-events-and-methods.md

• イベントハンドラー（change、open、close、blur、focus）
• イベント引数の構造
• メソッド（show、hide、focusIn、focusOut）
• コンポーネントインスタンスでのメソッドの直接呼び出し
• ライフサイクルイベント（created、destroyed）
• イベントのパターンとベストプラクティス
• 値のクリアと状態のリセット
• カスタム書式設定のための ItemRender

カスタマイズとスタイル設定

📄 読む： references/timepicker-customization-and-styling.md

• cssClass による CSS クラスのカスタマイズ
• テーマのオプション（Material、Bootstrap、Fluent、Tailwind）
• モバイルデバイス向けの全画面モード
• RTL（右から左）言語のサポート
• Strict モードでの検証
• Z-index の管理
• 幅と高さの設定
• アクセシビリティ機能
• Theme Studio との連携

API リファレンス

📄 読む： references/timepicker-api-reference.md

• プロパティ一覧（26 個）
• シグネチャ付きの全メソッド（5 個）
• イベント引数付きの全イベント（9 個）
• 型定義とインターフェイス
• デフォルト値と制約
• 各プロパティの使用例

高度なパターン

📄 読む： references/timepicker-advanced-patterns.md

• 検証を伴うフォーム送信
• キーボードショートカットと keyConfigs
• サーバーのタイムゾーンオフセット処理
• 永続化と localStorage
• 複数コンポーネントの連携
• パフォーマンスの最適化
• エラー処理のパターン
• 複雑な検証シナリオ

クイックスタート

<input id="timepicker" type="text" />

import { TimePicker } from '@syncfusion/ej2-calendars';

const timepicker = new TimePicker({
  value: new Date('1/1/2018 9:00 AM'),
  change: (e: any) => {
    console.log('Selected time:', e.value);
  },
  placeholder: 'Select a time'
});

timepicker.appendTo('#timepicker');

よくあるパターン

パターン 1：最小値／最大値の制約を設定したタイムピッカー

const timepicker = new TimePicker({
  value: new Date('1/1/2018 9:00 AM'),
  min: new Date('1/1/2018 8:00 AM'),
  max: new Date('1/1/2018 5:00 PM'),
  step: 30,
  change: (e: any) => {
    console.log('Appointment time:', e.value);
  },
  placeholder: 'Choose time (8 AM - 5 PM)'
});

timepicker.appendTo('#timepicker');

パターン 2：12 時間形式と 24 時間形式

const timepicker12 = new TimePicker({
  format: 'hh:mm a',  // 12-hour with AM/PM
  placeholder: 'Select time'
});

const timepicker24 = new TimePicker({
  format: 'HH:mm',    // 24-hour
  placeholder: 'Select time'
});

timepicker12.appendTo('#timepicker12');
timepicker24.appendTo('#timepicker24');

パターン 3：イベント処理

const timepicker = new TimePicker({
  value: new Date(),
  change: (e: any) => {
    console.log('Changed to:', e.value?.toLocaleTimeString());
  },
  open: (e: any) => {
    console.log('Popup opened');
  },
  close: (e: any) => {
    console.log('Popup closed');
  }
});

timepicker.appendTo('#timepicker');

主要な Props のリファレンス

Prop	Type	Default	Purpose
value	Date	null	現在選択されている時刻の値
format	string	Based on culture	時刻の表示形式（例："HH:mm"、"hh:mm a"）
min	Date	00:00	選択可能な最小時刻
max	Date	00:00	選択可能な最大時刻
step	number	30	リスト項目間の分単位の時間間隔
enabled	boolean	true	コンポーネントの有効／無効を切り替えます
readonly	boolean	false	読み取り専用状態（編集不可）
placeholder	string	-	入力欄のプレースホルダーテキスト
openOnFocus	boolean	false	入力欄にフォーカスしたときにポップアップを開きます
enableMask	boolean	false	マスク入力モードを有効にします
enableRtl	boolean	false	右から左へのレイアウトを有効にします
strictMode	boolean	false	入力を検証し、有効な時刻に制限します
showClearButton	boolean	true	クリアボタンの表示／非表示を切り替えます
fullScreenMode	boolean	false	モバイルの全画面モード
cssClass	string	-	スタイル設定用のカスタム CSS クラス
floatLabelType	string	Never	フローティングラベルの位置
allowEdit	boolean	true	手動での入力編集を許可します
locale	string	'en-US'	時刻の書式設定に使用するロケール
scrollTo	Date	-	ポップアップを開いたときのデフォルトのスクロール位置
width	string/number	-	コンポーネントの幅
zIndex	number	1000	ポップアップの Z-index
serverTimezoneOffset	number	-	処理に使用するサーバーのタイムゾーンオフセット
htmlAttributes	object	{}	カスタム HTML 属性

---

次のステップ：

• references/timepicker-getting-started.mdを読んで、最初の TimePicker をインストールして設定します
• references/timepicker-time-format-and-display.mdで書式設定のオプションを確認します
• references/timepicker-time-range-and-selection.mdで時刻の制約を確認します
• references/timepicker-advanced-patterns.mdで複雑なシナリオを確認します