# @pantrist/capacitor-date-picker

> Native DateTime Picker Plugin for Capacitor Apps

Latest version **8.0.0** (published 2026-04-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @pantrist/capacitor-date-picker
pnpm add @pantrist/capacitor-date-picker
yarn add @pantrist/capacitor-date-picker
bun add @pantrist/capacitor-date-picker
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 8.0.0 |
| Published | 2026-04-07 |
| First published | 2022-09-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 76.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Stewan Silva |
| Maintainers | nico.lueg |
| Keywords | capacitor, plugin, native |

## Links

- npm: https://www.npmjs.com/package/@pantrist/capacitor-date-picker
- Repository: https://github.com/Pantrist-dev/capacitor-date-picker
- Homepage: https://github.com/Pantrist-dev/capacitor-date-picker#readme
- Issues: https://github.com/Pantrist-dev/capacitor-date-picker/issues
- npm.io page: https://npm.io/package/@pantrist/capacitor-date-picker

## Recent versions

- 8.0.0 (latest) — 2026-04-07
- 7.0.1 — 2026-04-07
- 7.0.0 — 2025-03-20
- 6.0.0 — 2024-04-29
- 5.0.0 — 2023-05-04
- 1.0.0 — 2022-09-09

## README

<p align="center"><br><img src="https://user-images.githubusercontent.com/236501/85893648-1c92e880-b7a8-11ea-926d-95355b8175c7.png" width="128" height="128" /></p>
<h3 align="center">Capacitor Date Picker</h3>
<p align="center"><strong><code>@pantrist/capacitor-date-picker</code></strong></p>
<p align="center">
  Plugin for native Date Picker
</p>

<p align="center">
  <img src="https://img.shields.io/maintenance/yes/2023?style=flat-square" />
  <a href="https://www.npmjs.com/package/@pantrist/capacitor-date-picker"><img src="https://img.shields.io/npm/l/@pantrist/capacitor-date-picker?style=flat-square" /></a>
<br>
  <a href="https://www.npmjs.com/package/@pantrist/capacitor-date-picker"><img src="https://img.shields.io/npm/dw/@pantrist/capacitor-date-picker?style=flat-square" /></a>
  <a href="https://www.npmjs.com/package/@pantrist/capacitor-date-picker"><img src="https://img.shields.io/npm/v/@pantrist/capacitor-date-picker?style=flat-square" /></a>
  <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
<a href="#contributors"><img src="https://img.shields.io/badge/all%20contributors-3-orange?style=flat-square" /></a>
<!-- ALL-CONTRIBUTORS-BADGE:END -->
</p>

## Installation

Using npm:

```bash
npm install @pantrist/capacitor-date-picker
```

Using yarn:

```bash
yarn add @pantrist/capacitor-date-picker
```

Sync native files:

```bash
npx cap sync
```

### ios

- [x] present
- [x] config
  - [x] style
  - [x] format
  - [x] locale
  - [x] date
  - [x] mode
  - [x] theme
  - [x] timezone
  - [x] min
  - [x] max
  - [x] doneText
  - [x] cancelText
  - [x] is24h
  - [x] titleFontColor
  - [x] titleBgColor
  - [x] bgColor
  - [x] fontColor
  - [x] buttonBgColor
  - [x] buttonFontColor
  - [x] mergedDateAndTime

### android

- [x] present
- [x] config
  - [x] format
  - [x] locale
  - [x] date
  - [x] mode
  - [x] theme
  - [x] timezone
  - [x] min
  - [x] max
  - [x] doneText
  - [x] cancelText
  - [x] is24h

### web

- [ ] present
- [ ] config
  - [ ] format
  - [ ] locale
  - [ ] mode
  - [ ] theme
  - [ ] background
  - [ ] min
  - [ ] max
  - [ ] doneText
  - [ ] cancelText
  - [ ] timezone
  - [ ] title

## API

- `present(DatePickerOptions): Promise<{ value:string }>`

### Config for iOS (`DatePickerOptions`)

These options can be used through the `present` method and/or within `capacitor.config.json`

| name            | type              | default                                   |
| --------------- | ----------------- | ----------------------------------------- |
| format          | `string`          | `"yyyy-MM-dd'T'HH:mm:ss.sssZ"`            |
| style           | `string`          | if iOS 14 `"inline"` else only `"wheels"` |
| locale          | `string`          | **_`current device`_**                    |
| date            | `string`          | **_`current date`_**                      |
| mode            | `DatePickerMode`  | `"dateAndTime"`                           |
| theme           | `DatePickerTheme` | **_`current device`_**                    |
| timezone        | `string`          | **_`current device`_**                    |
| min             | `string`          | `null`                                    |
| max             | `string`          | `null`                                    |
| doneText        | `string`          | `"OK"`                                    |
| cancelText      | `string`          | `"Cancel"`                                |
| is24h           | `boolean`         | `false`                                   |
| titleFontColor  | `string`          | `null`                                    |
| titleBgColor    | `string`          | `null`                                    |
| bgColor         | `string`          | `null`                                    |
| fontColor       | `string`          | `null`                                    |
| buttonBgColor   | `string`          | `null`                                    |
| buttonFontColor | `string`          | `null`                                    |

### Config for Android (`DatePickerOptions`)

These options can be used through the `present` method and/or within `capacitor.config.json`

| name       | type              | default                          |
| ---------- | ----------------- | -------------------------------- |
| format     | `string`          | `"yyyy-MM-dd'T'HH:mm:ss.SSS'Z'"` |
| locale     | `string`          | **_`current device`_**           |
| date       | `string`          | **_`current date`_**             |
| mode       | `DatePickerMode`  | `"dateAndTime"`                  |
| theme      | `DatePickerTheme` | `"light"`                        |
| timezone   | `string`          | **_`current device`_**           |
| min        | `string`          | `null`                           |
| max        | `string`          | `null`                           |
| doneText   | `string`          | `"OK"`                           |
| cancelText | `string`          | `"Cancel"`                       |
| is24h      | `boolean`         | `false`                          |

> For more information check the [`definitions`](/src/definitions.ts) file

## Date Format

For format, we defined the old config deprecated because we have a inconsistence between Android and iOS platforms

now you need define your forma config in `android.format` and `ios.format`

### iOS

For format in iOS, you need to follow this [documentation](https://developer.apple.com/documentation/foundation/dateformatter)

### Android

For format in Android, you need to follow this [documentation](https://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html)

## Android Theme

You can define your personalized themes in android via resources styles check [example app](/example/android/app/src/main/res/values/styles.xml#L27)

How you see in example, just define your picker theme in global assets your app and send via `android.theme` prop in your capacitor.config file or your `options.android.theme` in present call.

## Demo

![](demo-android.gif)
![](demo-ios.gif)

## Usage

```js
import { DatePicker } from '@pantrist/capacitor-date-picker';
import type { DatePickerTheme } from '@pantrist/capacitor-date-picker/src';
const selectedTheme: DatePickerTheme = 'light';

DatePicker.present({
  mode: 'date',
  locale: 'pt_BR',
  date: '13/07/2019',
  theme: selectedTheme,
  ios: {
    format: 'dd/MM/yyyy',
  },
  android: {
    format: 'dd/MM/yyyy',
  },
}).then(date => alert(date.value));
```

### Capacitor Config

```json
{
  //...
  "plugins": {
    "DatePickerPlugin": {
      "mode": "date",
      "locale": "pt_BR",
      "current": "13/07/2019",
      "format": "dd/MM/yyyy",
      "android": {
        "theme": "MyCustomeTheme"
      },
      "ios": {
        "style": "wheels"
      }
    }
  }
}
```

## iOS setup

- `ionic start my-cap-app --capacitor`
- `cd my-cap-app`
- `npm install --save @pantrist/capacitor-date-picker`
- `mkdir www && touch www/index.html`
- `sudo gem install cocoapods` (only once)
- `npx cap add ios`
- `npx cap sync ios` (every time you run `npm install`)
- `npx cap open ios`

> Tip: every time you change a native code you may need to clean up the cache (Product > Clean build folder) and then run the app again.

## Android setup

- `ionic start my-cap-app --capacitor`
- `cd my-cap-app`
- `npm install --save @pantrist/capacitor-date-picker`
- `mkdir www && touch www/index.html`
- `npx cap add android`
- `npx cap sync android` (every time you run `npm install`)
- `npx cap open android`
- `[extra step]` **OPTIONAL** in android case we need to tell Capacitor to initialise the plugin:

> on your `MainActivity.java` file add `com.getcapacitor.community.datepicker.DatePicker;` and then inside the init callback `add(DatePicker.class);`

Now you should be set to go. Try to run your client using `ionic cap run android --livereload --address=0.0.0.0`.

> Tip: every time you change a native code you may need to clean up the cache (Build > Clean Project | Build > Rebuild Project) and then run the app again.

## Updating

For existing projects you can upgrade all capacitor related packages (including this plugin) with this single command

`npx npm-upgrade '*capacitor*' && npm install`

## Example

https://github.com/capacitor-community/date-picker/tree/master/example

## License

MIT

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="https://twitter.com/StewanSilva"><img src="https://avatars1.githubusercontent.com/u/719763?v=4?s=75" width="75px;" alt=""/><br /><sub><b>Stew</b></sub></a><br /><a href="https://github.com/capacitor-community/date-picker/commits?author=stewwan" title="Code">💻</a> <a href="https://github.com/capacitor-community/date-picker/commits?author=stewwan" title="Documentation">📖</a></td>
    <td align="center"><a href="https://github.com/danielprrazevedo"><img src="https://avatars2.githubusercontent.com/u/20153661?v=4?s=75" width="75px;" alt=""/><br /><sub><b>Daniel Pereira</b></sub></a><br /><a href="https://github.com/capacitor-community/date-picker/commits?author=danielprrazevedo" title="Code">💻</a> <a href="https://github.com/capacitor-community/date-picker/commits?author=danielprrazevedo" title="Documentation">📖</a> <a href="#maintenance-danielprrazevedo" title="Maintenance">🚧</a></td>
    <td align="center"><a href="https://github.com/carolineoliva"><img src="https://avatars1.githubusercontent.com/u/4886893?v=4?s=75" width="75px;" alt=""/><br /><sub><b>Caroline Oliva</b></sub></a><br /><a href="https://github.com/capacitor-community/date-picker/commits?author=carolineoliva" title="Code">💻</a></td>
  </tr>
</table>

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

---
_Source: https://npm.io/package/@pantrist/capacitor-date-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._