@codaline-io/ionic-datepicker

A datepicker component for ionic

Usage no npm install needed!

<script type="module">
  import codalineIoIonicDatepicker from 'https://cdn.skypack.dev/@codaline-io/ionic-datepicker';
</script>

README

Built With Stencil

ionic-datepicker Build Status

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

Bildschirmfoto 2020-03-22 um 16 03 06 Bildschirmfoto 2020-03-22 um 16 04 05 Bildschirmfoto 2020-03-22 um 16 04 10 Bildschirmfoto 2020-03-22 um 16 05 05

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

Usage

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

Configuration

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