ionic-datepicker

This is a datepicker component for ionic projects. It is using js-datepicker in an ion-popover with the possibility to use an ion-datetime component on mobile devices.

Live Demo & Preview

Setup

Requirements

• Install 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 <script src='https://unpkg.com/@codaline-io/ionic-datepicker@VERSION/dist/ionic-datepicker.js'></script> 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 <script src='node_modules/@codaline-io/ionic-datepicker/dist/ionic-datepicker.js'></script> 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

Usage

• After the setup use ionic-datepicker as tag in your ionic pwa

Configuration

• For configration and translations check the component readme

Styling

• Styling/theming is done with css-variables.
• All css variables can be found in the variables.css
• All color/background variables are using ionic css variables per default