スタートガイド

インストール

AIアシストによるセットアップでプラグインをインストールできます。以下のコマンドを使用して、お使いの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.

手動セットアップを希望する場合は、以下のコマンドを実行してプラグインをインストールし、下記のプラットフォーム別の手順に従ってください：

bun add @capgo/capacitor-date-picker
bunx cap sync

インポート

import { DatePicker } from '@capgo/capacitor-date-picker';

よくある落とし穴

• プレゼントの間に隠れる：呼び出し hide() ピッカー表示中に別のピッカーを開けるかどうか。
• ISO文字列: pass date, minや max ドキュメントに記載されている文字列形式で、 format オプションが追加されました。
• 範囲バリデーション: presentRange() ビジネスルールはサーバー側でも適用すべきです。オフラインではユーザーが境界値の日付を選べるためです。

日付を選択

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);

ピッカーを非表示にする

await DatePicker.hide();

プラットフォームオプション

await DatePicker.present({
  mode: 'date',
  date: '2026-05-27',
  title: 'Select date',
  ios: {
    style: 'inline',
    theme: 'light',
  },
  android: {
    theme: 'light',
  },
});

共通オプション

オプション	説明
mode	date, time, dateAndTime, yearAndMonth, countDownTimer、または range.
date	初期選択値
min / max	選択可能な最小値と最大値
format	出力フォーマット。ISO、Java/Unicode、および一般的なMoment形式をサポートしています。
title	ダイアログのタイトル。
locale	サポートされている場合、ネイティブピッカーで使用されるロケール。
timezone	パースおよびフォーマットに使用されるタイムゾーン。
is24h	24時間表記を優先する。
minuteStep	時刻ピッカーの分単位の間隔。
doneText / cancelText	カスタムアクションのラベル。

サンプルアプリ

このリポジトリには、ネイティブの日付ピッカー、時刻ピッカー、範囲ピッカーを起動する Capacitor のサンプルアプリが含まれており、 hide()プラグインのバージョン呼び出しも確認できます。

iOSと	Android

API リファレンス

API の完全なリファレンスは、パッケージのREADMEとTypeScriptの型定義で管理されています:

• README
• 型定義