Awesome

lit-flatpickr

Flatpickr for Lit Element

Installation

Lit-Flatpickr can be installed through npm

npm install lit-flatpickr

Usage

It is highly recommended that you use lit-flatpickr as a wrapper for your own custom input elements, to provide the best User experience for the users.

import 'lit-flatpickr';
import { html, LitElement } from 'lit';

class MyApp extends LitElement {
  getValue() {
    this.shadowRoot.querySelector('#my-date-picker').getValue();
  }

  render() {
    return html`
      <lit-flatpickr
        id="my-date-picker"
        altInput
        altFormat="F j, Y"
        dateFormat="Y-m-d"
        theme="material_orange"
        minDate="2020-01"
        maxDate="2020-12-31"
      ></lit-flatpickr>
    `;
  }
}

Styling the input component

html`
  <style>
    lit-flatpickr {
      cursor: pointer;
      font-size: 38px;
    }
  </style>
  <lit-flatpickr id="my-date-picker" altInput altFormat="F j, Y" dateFormat="Y-m-d" theme="material_orange" minDate="2020-01" maxDate="2020-12-31"></lit-flatpickr> `;
`

Using your own custom input Web Component

// Web Component
html`
  <lit-flatpickr>
    <my-custom-input></my-custom-input>
  </lit-flatpickr>
`;

// HTML
html`
  <lit-flatpickr>
    <div>
      <input />
    </div>
  </lit-flatpickr>
`;

Properties

Methods