Skip to main content
@capgo/capacitor-date-picker Device APIs Open source

Date Picker Capacitor plugin

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

Install

bun add @capgo/capacitor-date-picker bunx cap sync
npm, pnpm or yarn
  • npm install @capgo/capacitor-date-picker
  • pnpm add @capgo/capacitor-date-picker
  • yarn add @capgo/capacitor-date-picker

Guide

How to use Date Picker in Capacitor

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

FAQ

Date Picker plugin FAQ

How do I install the Date Picker plugin in a Capacitor app?

Run "bun add @capgo/capacitor-date-picker" (or "npm install @capgo/capacitor-date-picker"), then run "bunx cap sync" so the iOS and Android projects pick up the native code. Import it from "@capgo/capacitor-date-picker" in your app code.

Does @capgo/capacitor-date-picker work with React, Vue and Angular?

Yes. Date Picker is a Capacitor package, so it works with any web framework that runs inside Capacitor, including Ionic, React, Vue, Angular, Svelte and plain JavaScript.

Which Capacitor version does @capgo/capacitor-date-picker support?

Capgo plugins follow Capacitor's major version: use the plugin major version that matches your Capacitor major version (for example plugin v8 with Capacitor 8). The compatibility table in the GitHub README lists the maintained versions.

Is @capgo/capacitor-date-picker free and open source?

Yes. The source code is public on GitHub at https://github.com/Cap-go/capacitor-date-picker/ and the package is free to install from npm. Bug reports and pull requests are welcome.

Can I update code that uses Date Picker without an App Store review?

Installing or upgrading the plugin changes native code, so it needs a new store build. After that, JavaScript, HTML and CSS changes that call the plugin can ship instantly with Capgo live updates.

Ship Date Picker changes without waiting for app review

Once the plugin is in your store build, Capgo live updates push your JavaScript, HTML and CSS changes to users in minutes.

Start with Capgo