@capacitor-community/date-picker
v4.0.0-1TypeScript
Native DateTime Picker Plugin for Capacitor Apps
3.4K/weekUpdated 1 weeks agoMITUnpacked: 79.7 KB
Published by Stewan Silva
npm install @capacitor-community/date-picker
Capacitor Date Picker
@capacitor-community/date-picker
Capacitor community plugin for native Date Picker
Maintainers
| Maintainer | GitHub | Social |
| -------------- | ------------------------------------------------------- | ----------------------------------------------- |
| Stewan Silva | stewones | @stewones |
| 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:
``bash`
npm install @capacitor-community/date-picker
Using yarn:
`bash`
yarn add @capacitor-community/date-picker
Sync native files:
`bash`
npx cap sync
Upgrade guide
from 2. to 3. we have some new settings.ios
You can see in definitions file, we hava the sections and android. You must change your format configs to ios and android configs.
Very important!!
To maintain the consistency of the community plugins, we changed the name of the variable the plugin is in. As we are experiencing a change across the capacitor plugins import ecosystem, we think this is a good opportunity to do that
Before, to use the plugin, you needed to import like this
`ts`
import '@capacitor-community/date-picker';
import { Plugins } from '@capacitor/core';
const { DatePickerPlugin } = Plugins;
Now, we not have the Plugins variable and we not register the DatePickerPlugin in Capacitor.Plugins
To use this plugin.
Now, to use this plugin, you need to do this
`ts`
import { DatePicker } from '@capacitor-community/date-picker';
You need to replace all of your code
You must also follow the guide for android.
Roadmap
$3
- [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
$3
- [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
$3
- [ ] present
- [ ] config
- [ ] format
- [ ] locale
- [ ] mode
- [ ] theme
- [ ] background
- [ ] min
- [ ] max
- [ ] doneText
- [ ] cancelText
- [ ] timezone
- [ ] title
API
- present(DatePickerOptions): Promise<{ value:string }>
$3
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" |string
| style | | if iOS 14 "inline" else only "wheels" |string
| locale | | _current device_ |string
| date | | _current date_ |DatePickerMode
| mode | | "dateAndTime" |DatePickerTheme
| theme | | _current device_ |string
| timezone | | _current device_ |string
| min | | null |string
| max | | null |string
| doneText | | "OK" |string
| cancelText | | "Cancel" |boolean
| is24h | | false |string
| titleFontColor | | null |string
| titleBgColor | | null |string
| bgColor | | null |string
| fontColor | | null |string
| buttonBgColor | | null |string
| buttonFontColor | | null |
$3
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'" |string
| locale | | _current device_ |string
| date | | _current date_ |DatePickerMode
| mode | | "dateAndTime" |DatePickerTheme
| theme | | "light" |string
| timezone | | _current device_ |string
| min | | null |string
| max | | null |string
| doneText | | "OK" |string
| cancelText | | "Cancel" |boolean
| is24h | | false |
> For more information check the definitions 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
$3
For format in iOS, you need to follow this documentation
$3
For format in Android, you need to follow this documentation
Android Theme
You can define your personalized themes in android via resources styles check example app
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
Usage
`js
import { DatePicker } from '@capacitor-community/date-picker';
import type { DatePickerTheme } from '@capacitor-community/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));
`
$3
`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
-
-
-
- (only once)npx cap add 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
-
-
-
-
- (every time you run npm install)npx cap open android
-
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 💻 |  jcesarmobile 💻 |  Valentin 💻 |  Jordi De Pau ⚠️ |
This project follows the all-contributors specification. Contributions of any kind welcome!