Swiftpack.co - Package - stewwan/capacitor-datepick

capacitor-datepick npm version

Native Datetime Picker Plugin for Capacitor Apps

work in progress

Native Datetime Picker Plugin for Capacitor Apps

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 }>

Config for iOS (DatepickOptions)

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 |

Config for Android (DatepickOptions)

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 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-datepick
  • 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 import io.stewan.capacitor.datepick.DatepickPlugin; and then inside the init callback add(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

Github

link
Stars: 1
Help us keep the lights on

Dependencies

Used By

Total: