Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/capacitor-community/date-picker
Native DateTime Picker Plugin for Capacitor Apps
https://github.com/capacitor-community/date-picker
Last synced: 1 day ago
JSON representation
Native DateTime Picker Plugin for Capacitor Apps
- Host: GitHub
- URL: https://github.com/capacitor-community/date-picker
- Owner: capacitor-community
- License: mit
- Created: 2019-07-08T07:13:45.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-08-29T12:23:44.000Z (4 months ago)
- Last Synced: 2024-11-30T16:47:34.249Z (12 days ago)
- Language: Swift
- Homepage:
- Size: 5.02 MB
- Stars: 88
- Watchers: 10
- Forks: 29
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- awesome-capacitorjs - @capacitor-community/date-picker - Native DateTime Picker Plugin for Capacitor Apps. (Plugins / Community Plugins)
- awesome-capacitor - Date picker - Native DateTime Picker Plugin for Capacitor Apps. (Community plugins)
README
Capacitor Date Picker
@capacitor-community/date-picker
Capacitor community plugin for native Date Picker## Maintainers
| Maintainer | GitHub | Social |
| -------------- | ------------------------------------------------------- | ----------------------------------------------- |
| Stewan Silva | [stewones](https://github.com/stewones) | [@stewones](https://twitter.com/stewones) |
| Daniel Pereira | [danielprrazevedo](https://github.com/danielprrazevedo) | [@DandanPrr](https://twitter.com/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](/CHANGELOG.md) 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.
You can see in [definitions](/src/definitions.ts) file, we hava the sections `ios` 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
### ios
- [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### 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.sssZ"` |
| style | `string` | if iOS 14 `"inline"` else only `"wheels"` |
| locale | `string` | **_`current device`_** |
| date | `string` | **_`current date`_** |
| mode | `DatePickerMode` | `"dateAndTime"` |
| theme | `DatePickerTheme` | **_`current device`_** |
| 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`](/src/definitions.ts) 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`
### iOS
For format in iOS, you need to follow this [documentation](https://developer.apple.com/documentation/foundation/dateformatter)
### Android
For format in Android, you need to follow this [documentation](https://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html)
## Android Theme
You can define your personalized themes in android via resources styles check [example app](/example/android/app/src/main/res/values/styles.xml#L27)
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
![](demo-android.gif)
![](demo-ios.gif)## 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));
```### Capacitor Config
```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`
- `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`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](https://allcontributors.org/docs/en/emoji-key)):
Stew
💻 📖
Daniel Pereira
💻 📖 🚧
Caroline Oliva
💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!