__CAPGO_KEEP_0__
インストール手順とこのプラグインの全マークダウンガイドを含むセットアッププロンプトをコピーします。
Set up this Capacitor plugin in the project.
Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-date-picker`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/date-picker/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.
インストール
「インストール」のセクションCapgoのAI-Assistedセットアップを使用してプラグインをインストールできます。AIツールにCapgoスキルを追加するには、以下のコマンドを実行してください。
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins次に、以下のプロンプトを使用してください:
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-date-picker` plugin in my project.あなたがマニュアルセットアップを好む場合は、以下のコマンドを実行してプラットフォーム固有の指示を以下に従ってください:
npm install @capgo/capacitor-date-pickernpx cap syncインポート
「インポート」タイトル付のセクションimport { DatePicker } from '@capgo/capacitor-date-picker';日付を選択
「日付を選択」タイトル付のセクションconst result = await DatePicker.present({ mode: 'date', date: '2026-05-27', min: '2026-01-01', max: '2026-12-31', format: 'yyyy-MM-dd', title: 'Select date',});
console.log(result.value);時間を選択
時刻を選択const result = await DatePicker.present({ mode: 'time', is24h: true, minuteStep: 15, format: 'HH:mm', title: 'Select time',});
console.log(result.value);日付と時刻を選択
時刻を選択const result = await DatePicker.present({ mode: 'dateAndTime', date: '2026-05-27T14:30:00', format: "yyyy-MM-dd'T'HH:mm:ss", title: 'Select date and time',});月を選択
時刻を選択const result = await DatePicker.present({ mode: 'yearAndMonth', date: '2026-05-01', format: 'yyyy-MM', title: 'Select month',});範囲を選択
時刻を選択const range = await DatePicker.presentRange({ start: '2026-05-01', end: '2026-05-27', format: 'yyyy-MM-dd', startTitle: 'Start date', endTitle: 'End date',});
console.log(range.start, range.end, range.value);ピッカーを非表示
Section titled “Hide The Picker”await DatePicker.hide();__CAPGO_KEEP_1__
Section titled “Platform Options”await DatePicker.present({ mode: 'date', date: '2026-05-27', title: 'Select date', ios: { style: 'inline', theme: 'light', }, android: { theme: 'light', },});__CAPGO_KEEP_3__
Section titled “Common Options”| __CAPGO_KEEP_4__ | __CAPGO_KEEP_5__ |
|---|---|
mode | date, time, dateAndTime, yearAndMonth, countDownTimer__CAPGO_KEEP_6__ range. |
date | __CAPGO_KEEP_7__ |
min / max | __CAPGO_KEEP_8__ |
format | 出力形式。 ISO、Java/Unicode、および Moment-style の一般的な形式がサポートされています。 |
title | ダイアログのタイトル。 |
locale | ネイティブのピッカーでサポートされている場合の使用されるロケール。 |
timezone | パースとフォーマットのために使用されるタイムゾーン。 |
is24h | 24時間の時間を優先します。 |
minuteStep | タイムピッカーの分間隔。 |
doneText / cancelText | カスタムアクションのラベル。 |
例アプリ
「例アプリ」のセクション。リポジトリには、Capacitor の例アプリが含まれており、ネイティブの日付ピッカー、時刻ピッカー、範囲ピッカー、プラグインバージョンコールなどを開きます。 hide()iOS
| iOS | 日本語 |
|---|---|
![]() | ![]() |
@API リファレンス
@API リファレンス@APIの完全なリファレンスは、パッケージのREADMEとTypeScript定義で管理されています:

