Skip to main content
Back to plugins
@capgo/capacitor-date-picker
Tutorial
@capgo/capacitor-date-picker

Date Picker

Native date, time, date-time, year-month, and range picker for iOS, Android, and Web

Guide

Tutorial on Date Picker

Test on device

Download the Capgo app, then scan the QR code.

Date Picker plugin preview QR code

Using @capgo/capacitor-date-picker

@capgo/capacitor-date-picker adds native date, time, date-time, year-month, and range pickers to Capacitor apps on iOS and Android, with a matching Web fallback.

This is Capgo's maintained alternative to @capacitor-community/date-picker. We listen to community reports, fix issues fast, and ship updates instead of leaving long-standing GitHub issues open.

Install

npm install @capgo/capacitor-date-picker
npx cap sync

Native Picker Demo

iOS Android
Animated iOS demo of @capgo/capacitor-date-picker opening, selecting a date, and closing Animated Android demo of @capgo/capacitor-date-picker opening, selecting a date, and closing

Native Picker Screenshots

iOS Android
iOS screenshot of @capgo/capacitor-date-picker showing the native date picker Android screenshot of @capgo/capacitor-date-picker showing the native date picker

Pick A Date

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

Pick A Time

const result = await DatePicker.present({
  mode: 'time',
  is24h: true,
  minuteStep: 15,
  format: 'HH:mm',
  title: 'Select time',
});

Pick A Range

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

Close An Active Picker

await DatePicker.hide();

What This Fixes

  • Capacitor 8 support.
  • Web implementation with the same present() API.
  • Programmatic hide().
  • Dialog title support.
  • iOS rotation-safe layout, locale handling, and yearAndMonth mode.
  • Safer date parsing and date-only timezone handling.
  • Android nested options, is24h, dialog layout handling, and UI-thread dialog handling.
  • Minute steps and date range selection.

Full Reference