capacitor-datepick
Native Datetime Picker Plugin for Capacitor Apps
work in progress
Roadmap
ios
- [x] present
- [x] config
- [x] format
- [x] locale
- [x] mode
- [x] theme
- [x] background
- [ ] min
- [ ] max
- [ ] doneText
- [ ] cancelText
- [ ] timezone
- [ ] title
android
- [x] present
- [x] config
- [x] format
- [ ] locale
- [x] mode
- [x] theme
- [x] background
- [x] min
- [x] max
- [x] doneText
- [x] cancelText
- [x] timezone
- [x] title
web
- [ ] present
- [ ] config
- [ ] format
- [ ] locale
- [ ] mode
- [ ] theme
- [ ] background
- [ ] min
- [ ] max
- [ ] doneText
- [ ] cancelText
- [ ] timezone
- [ ] title
API
present(DatepickOptions): Promise<{ value:string }>
DatepickOptions
)
Config for iOS (These options can be used through the present
method and/or within capacitor.config.json
name | type | default | options |
---|---|---|---|
format | string |
MM/dd/yyyy hh:mm a |
|
locale | string |
en_US |
|
date | string |
current date |
any date in string format |
mode | string |
dateAndTime |
time/date/dateAndTime/countDownTimer |
background | string |
transparent |
any #hexadecimal value |
theme | string |
light |
light/dark |
DatepickOptions
)
Config for Android (These options can be used through the present
method and/or within capacitor.config.json
name | type | default | options |
---|---|---|---|
format | string |
MM/dd/yyyy hh:mm a |
|
date | string |
current date |
any date in string format |
min | string |
none |
any date in string format |
max | string |
none |
any date in string format |
mode | string |
date |
date/time |
type | string |
spinner |
spinner/calendar |
theme | string |
light |
light/dark |
timezone | string |
UTC |
|
doneText | string |
Done |
|
cancelText | string |
Cancel |
|
title | string |
none |
|
is24h | boolean |
true |
for time mode |
For more information check the
definitions
file
Usage
import { Datepick } from 'capacitor-datepick';
const datepick = new Datepick();
const selectedTheme = 'light';
datepick
.present({
mode: 'date',
locale: 'pt_BR',
format: 'dd/MM/yyyy',
date: '13/07/2019',
theme: selectedTheme,
background: selectedTheme === 'dark' ? '#333333' : '#ffffff'
})
.then(date => alert(date.value));
Capacitor Config
{
//...
"plugins": {
"DatepickPlugin": {
"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-datepick
mkdir www && touch www/index.html
-
sudo gem install cocoapods
(only once) npx cap add ios
-
npx cap sync ios
(every time you runnpm 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-datepick
mkdir www && touch www/index.html
npx cap add android
-
npx cap sync android
(every time you runnpm install
) npx cap open android
-
[extra step]
in android case we need to tell Capacitor to initialise the plugin:
on your
MainActivity.java
file addimport io.stewan.capacitor.datepick.DatepickPlugin;
and then inside the init callbackadd(DatepickPlugin.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
Sample app
https://github.com/stewwan/capacitor-datepick-demo
You may also like
Cheers
Follow me @Twitter
License
MIT