Guide
How to use Date Picker in Capacitor
__CAPGO_KEEP_0__アプリをダウンロードし、QR __CAPGO_KEEP_1__をスキャン
Capgo アプリをダウンロードし、QR code をスキャンしてください。
@capgo/capacitor-date-pickerを使用
@capgo/capacitor-date-picker CapacitorアプリにiOSとAndroidでネイティブの日付、時刻、日時、年月、範囲ピッカーを追加し、Webのフォールバックを含みます。
これはCapgoの管理された代替です。 @capacitor-community/date-pickerコミュニティの報告に耳を傾け、問題を迅速に修正し、長期間にわたるGitHubの問題をオープンにしない代わりにアップデートを配信します。
インストール
npm install @capgo/capacitor-date-picker
npx cap sync
ネイティブ ピッカー デモ
| 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 8 サポート。
- Web での実装は同じです。
present()API。 - プログラムによる
hide(). - ダイアログのタイトルサポート。
- iOS の回転安全なレイアウト、ロケールの取り扱い、モード。
yearAndMonthmode. - Android のネストされたオプション、
- ダイアログのレイアウトの取り扱い、UI スレッドのダイアログの取り扱い。
is24h1 分のステップと日付の範囲の選択。 - フル リファレンス
__CAPGO_KEEP_0__
- GitHub: https://github.com/Cap-go/capacitor-date-picker/
- ドキュメント: /docs/plugins/date-picker/