@capgo/capacitor-date-picker

Native date, time, date-time, year-month, and range picker for Capacitor 8 on iOS, Android, and web.

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

What We Fixed

• Capacitor 8 support.
• Web implementation with the same present() API.
• Programmatic hide().
• Dialog title support.
• iOS rotation-safe layout.
• iOS locale handling for inline day/month labels.
• iOS yearAndMonth mode.
• No iOS force unwrap crash on invalid dates.
• ISO, Java/Unicode, and common Moment-style formats such as YYYY-MM-DD.
• Date-only timezone handling without one-day shifts.
• iOS min and max parsing with ISO strings.
• Android nested android options.
• Android is24h.
• Android dateAndTime keeps the chosen date when moving to time.
• Android dialog width/layout handling.
• Android UI-thread dialog handling so native dialogs open reliably from Capacitor calls.
• Minute steps for time pickers.
• Range selection via presentRange().

Demo

iOS	Android

Screenshots

iOS	Android

Install

You can use our AI-Assisted Setup to install the plugin. Add the Capgo skills to your AI tool using the following command:

npx skills add https://github.com/cap-go/capacitor-skills --skill capacitor-plugins

Then use the following prompt:

Use the `capacitor-plugins` skill from `cap-go/capacitor-skills` to install the `@capgo/capacitor-date-picker` plugin in my project.

If you prefer Manual Setup, install the plugin by running the following commands and follow the platform-specific instructions below:

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

Usage

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 a date',
});

console.log(result.value);

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

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

Platform Notes

• iOS uses UIDatePicker with Auto Layout so the picker survives screen rotation.
• Android uses platform DatePickerDialog and TimePickerDialog; range selection is two native date selections.
• Web uses native browser inputs in a small modal wrapper.
• minuteStep is rounded to a platform-supported interval on iOS.

API

present(options?: DatePickerOptions | undefined) => Promise<DatePickerResult>

presentRange(options?: DatePickerRangeOptions | undefined) => Promise<DatePickerRangeResult>

hide() => Promise<void>

getPluginVersion() => Promise<PluginVersionResult>