Needlessly Postulating Minds

    @capacitor-community/date-picker
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.3 • Public • Published


    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!

    Install

    npm i @capacitor-community/date-picker

    DownloadsWeekly Downloads

    271

    Version

    0.2.3

    License

    MIT

    Unpacked Size

    153 kB

    Total Files

    44

    Last publish

    Collaborators

    • nkalupahana
    • dtarnawsky
    • ryaa
    • dallasjames
    • tafelnl
    • thegnuu
    • pbowyer
    • capcombot
    • jcesarmobile
    • maxlynch
    • mhartington
    • dotnetkow
    • it_mike_s
    • byrds
    • rdlabo
    • priyankpatel
    • dwieeb
    • stewan
    • arielhernandezmusa
    • jeepq
    • start9keagan
    • boosten
    • nklayman
    • ihadeed
    • danielprr
    • ckgaparajita
    • jpender
    • nhyatt
    • pwespi
    • epicshaggy
    • thomasvidas
    • robingenz
    • diachedelic
    • johnborges
    • tobyas
    • elylucas
    • larsmikkelsen
    • giodimiliaionic
    • brownoxford
    • mrbatista
    • bazuka5801
    • hemang