ガイド
Capacitor で Date Picker を使う方法
@capgo/capacitor-date-picker を使用すると
@capgo/capacitor-date-picker iOS と Android の Capacitor アプリに、日付・時刻・日時・年月・範囲のネイティブピッカーが追加され、Web フォールバックも提供されます。
これは Capgo がメンテナンスしている代替手段です。 @capacitor-community/date-pickerコミュニティの報告に耳を傾け、問題を迅速に修正し、GitHub の長年の課題を放置せずにアップデートをリリースします。
インストール
npm install @capgo/capacitor-date-picker
npx cap sync
Native Picker デモ
| iOSと | Androidでは |
|---|---|
 |
 |
ネイティブピッカーのスクリーンショット
| iOSと | Androidでは |
|---|---|
 |
 |
日付を選択
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',
});
範囲を選択
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);
アクティブなピッカーを閉じる
await DatePicker.hide();
この修正で解決すること
- Capacitor もサポート。
- Webでも同様の
present()API. - プログラムによる
hide(). - ダイアログのタイトル表示に対応。
- iOSの回転対応レイアウト、ロケール処理、および
yearAndMonthモード。 - より安全な日付パースと日付のみのタイムゾーン処理。
- Androidのネストされたオプション、
is24hダイアログのレイアウト、およびUIスレッドでのダイアログ処理。 - 分単位のステップ設定と日付範囲の選択。
リファレンス全文
- GitHub: https://github.com/Cap-go/capacitor-date-picker/
- ドキュメント: /docs/plugins/date-picker/