https://github.com/codaline-io/ionic-datepicker
A datepicker component for ionic
https://github.com/codaline-io/ionic-datepicker
date datepicker ionic stenciljs webcomponent
Last synced: 6 months ago
JSON representation
A datepicker component for ionic
- Host: GitHub
- URL: https://github.com/codaline-io/ionic-datepicker
- Owner: codaline-io
- License: mit
- Archived: true
- Created: 2020-03-13T09:53:01.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-05-29T10:05:30.000Z (about 3 years ago)
- Last Synced: 2024-10-02T07:01:18.766Z (9 months ago)
- Topics: date, datepicker, ionic, stenciljs, webcomponent
- Language: TypeScript
- Size: 647 KB
- Stars: 2
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# ionic-datepicker [](https://github.com/codaline-io/ionic-datepicker/actions/)
This is a datepicker component for ionic projects. It is using [js-datepicker](https://www.npmjs.com/package/js-datepicker) in an [ion-popover](https://ionicframework.com/docs/api/popover) with the possibility to use an [ion-datetime](https://ionicframework.com/docs/api/datetime) component on mobile devices.
## [Live Demo & Preview](https://codaline-io.github.io/ionic-datepicker)
## Setup
### Requirements
- Install [`js-datepicker`](https://www.npmjs.com/package/js-datepicker)
- Make them globally available (on `window`) load `js-datepicker` css (in an angular project, just add them to your `angular.json` as scripts and styles)
- Keep in mind that it is only usable in an ionic project
### Script tag
- Put a script tag similar to this `` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc
### Node Modules
- Run `npm install @codaline-io/ionic-datepicker --save`
- Put a script tag similar to this `` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc
### In a stencil-starter app
- Run `npm install @codaline-io/ionic-datepicker --save`
- Add an import to the npm packages `import @codaline-io/ionic-datepicker;`
- Then you can use the element anywhere in your template, JSX, html etc
### In other frameworks
- Check stenciljs [framework integration documentation](https://stenciljs.com/docs/overview)
## Usage
- After the setup use `ionic-datepicker` as tag in your ionic pwa
### Configuration
- For configration and translations check the [component readme](https://github.com/codaline-io/ionic-datepicker/blob/master/src/components/ionic-datepicker/readme.md)
### Styling
- Styling/theming is done with css-variables.
- All css variables can be found in the [variables.css](https://github.com/codaline-io/ionic-datepicker/blob/master/src/components/variables.css)
- All color/background variables are using ionic css variables per default