@capacitor-community/date-picker

Capacitor Date Picker

@capacitor-community/date-picker

Capacitor community plugin for native Date Picker

Maintainers

Maintainer	GitHub	Social
Stewan Silva	stewwan	@StewanSilva
Daniel Pereira	danielprrazevedo	@DandanPrr

Notice 🚀

We're starting fresh under an official org. If you were using the previous npm package capacitor-datepick, please update your package.json to @capacitor-community/date-picker. Check out changelog for more info.

Installation

Using npm:

npm install @capacitor-community/date-picker

Using yarn:

yarn add @capacitor-community/date-picker

Sync native files:

npx cap sync

Roadmap

ios

[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
- [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.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`
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 file

Demo

Usage

import { Plugins } from "@capacitor/core";
import { DatePickerPluginInterface } from "@capacitor-community/date-picker";

const DatePicker: DatePickerPluginInterface = Plugins.DatePickerPlugin as any;
const selectedTheme = "light";

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

Capacitor Config

{
  //...
  "plugins": {
    "DatePickerPlugin": {
      "mode": "date",
      "locale": "pt_BR",
      "current": "13/07/2019",
      "format": "dd/MM/yyyy"
    }
  }
}

iOS setup

ionic start my-cap-app --capacitor
cd my-cap-app
npm install --save @capacitor-community/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 @capacitor-community/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] in android case we need to tell Capacitor to initialise the plugin:

on your MainActivity.java file add com.getcapacitor.community.datepicker.DatePickerPlugin; and then inside the init callback add(DatePickerPlugin.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):

_Stew

_{Daniel Pereira}

_{Caroline Oliva}

This project follows the all-contributors specification. Contributions of any kind welcome!

npm