<air-datepicker>

Air DatePicker is a really awesome date picker. While the actual library is written using jQuery, I sometimes find it difficult to use inside modern libraries. That's why this project exists. It's a little wrapper around AirDatePicker which gives a simple web component and you can use it inside your vanilla, React, Vue, (...) application.

Instalattion

You can use npm or Yarn to install the component

npm install --save wc-air-datepicker

Now just include one Javascript and you're done

<script src="node_modules/air-datepicker/dist/air-datepicker.js"></script>

Or you can check this page which guides how to plug it inside a framework of choice.

Changes

We have made some changes to the component here are all of them
🔤 English is default language instead of Russian
🔌 Automatically loading jQuery if it's not already loaded.
💅 Added custom properties to make styling a little bit easier

I am open to suggestions and improvements, open an issue or submit a PR if you would like to improve the project!

Styling

You can change some colors using custom properties. I haven't invested into making every single color available here, just the ones that seem reasonable to have. If you need more colors you can always open an issue or submit a PR.

  :root {
    --air-datepicker--day-name: #ff9a19;
    --air-datepicker--current: #4eb5e6;
    --air-datepicker--selected: #5cc4ef;
    --air-datepicker--selected-focus: #45bced;
  }

Usage

  <air-datepicker>
     <input /> <!-- We will attach date picker on the first input field  -->
  </air-datepicker>

 <air-datepicker timepicker="true">
    <input />
 </air-datepicker>

You can set all of your customizations on <air-datepicker> tag, for the full list of available customizations go to this page.