@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(...)
• presentRange(...)
• hide()
• getPluginVersion()
• Interfaces
• Type Aliases

present(...)

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

Present the date picker.

| Param | Type | | ------------- | --------------------------------------------------------------- | | options | DatePickerOptions |

Returns: Promise<DatePickerResult>

presentRange(...)

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

Present a range picker. Native platforms use two native date selections; web shows start and end controls in one dialog.

| Param | Type | | ------------- | ------------------------------------------------------------------------- | | options | DatePickerRangeOptions |

Returns: Promise<DatePickerRangeResult>

hide()

hide() => Promise<void>

Close the currently visible picker, if any.

getPluginVersion()

getPluginVersion() => Promise<PluginVersionResult>

Returns the platform implementation version marker.

Returns: Promise<PluginVersionResult>

Interfaces

DatePickerResult

| Prop | Type | Description | | ----------- | --------------------------- | ----------------------------------------------------- | | value | string | null | Formatted value. Null means the picker was dismissed. |

DatePickerOptions

| Prop | Type | Description | | ------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------- | | min | string | Minimum selectable value. | | max | string | Maximum selectable value. | | date | string | Initial selected value. | | ios | DatePickerIosOptions | Platform-specific iOS options override top-level options. | | android | DatePickerAndroidOptions | Platform-specific Android options override top-level options. |

DatePickerIosOptions

| Prop | Type | Description | Default | | ----------------------- | ----------------------------------------------------------------- | ----------------------------------------------------- | --------------------- | | style | DatePickerIosStyle | iOS picker style. | "inline" | | titleFontColor | string | | | | titleBgColor | string | | | | bgColor | string | | | | fontColor | string | | | | buttonBgColor | string | | | | buttonFontColor | string | | | | mergedDateAndTime | boolean | Show date and time in one UIDatePicker when possible. | |

DatePickerAndroidOptions

| Prop | Type | Description | | ----------- | ----------------------------------------------------------- | --------------------------------------------------------- | | theme | DatePickerTheme | Android dialog theme resource name or built-in theme key. |

DatePickerRangeResult

| Prop | Type | Description | | ----------- | --------------------------- | ----------------------------------------------------------- | | start | string | null | Formatted start value. Null means the picker was dismissed. | | end | string | null | Formatted end value. Null means the picker was dismissed. | | value | string | null | Convenience "start/end" value when both dates are selected. |

DatePickerRangeOptions

| Prop | Type | Description | | ---------------- | ------------------- | ----------------------------------------- | | start | string | Initial range start value. | | end | string | Initial range end value. | | startTitle | string | Title used while choosing the start date. | | endTitle | string | Title used while choosing the end date. |

PluginVersionResult

| Prop | Type | | ------------- | ------------------- | | version | string |

Type Aliases

DatePickerIosStyle

'wheels' | 'inline' | 'compact' | 'automatic'

DatePickerTheme

'light' | 'dark' | string