A custom datepicker element based on Google's Material Design built from scratch with lit-element


Keywords
cal, calendar, date, date-picker, datepicker, lit-element, lit-html, picker, web-component, web-components, datepicker-element, intl, polymer, webcomponents
License
MIT
Install
npm install app-datepicker@4.0.0

Documentation

app-datepicker

Datepicker element built with lit-element and Material Design 2


Buy Me A Coffee tippin.me Follow me

Version lit-element Node version MIT License

Downloads Total downloads Packagephobia Bundlephobia

CircleCI Dependency Status

codebeat badge Codacy Badge Language grade: JavaScript Code of Conduct

A different way of datepicker-ing on the web.

🛠 While it is still in RC release, feel free to try it out.

This marks another completion of an important milestone of app-datepicker with all the love from the Web Components community in making this element great and wonderful. As Web Components getting more and more traction and better at providing a web standard way of creating shareable components, it plays an important role in the JavaScript community as many developers depend on a plethora of development tools written in JavaScript for the web to create a better developer experience when developing a library, a component, or even a large scalable application.

screen shot 2019-01-30 at 12 49 30

Today, app-datepicker has been completely rewritten to adapt to the best of both worlds by leveraging the modern technologies the community most familiar with since year 2018.

The following are the list of tools used that makes it shine:

  1. TypeScript
  2. lit-element

Table of contents

Pre-requisite

Installation

  • NPM

    $ npm i app-datepicker@next
  • Alternatively, it can be downloaded from any of the following awesome CDNs:

    1. jsdelivr (ESM)
    2. unpkg (ESM)

How to use

Polyfills

Please make sure you have all these features available on the browsers you are supporting. If no, please consider polyfilling in order to run the datepicker element.

The following snippet shows a simple script used in the demo to load polyfills via feature detection on different browsers:

<script>
  if (null == Array.prototype.find) {
    Object.defineProperty(Array.prototype, 'find', {
      value: function arrayFind(cb) {
        const filtered = this.filter(cb);
        return !filtered.length ? void 0 : filtered[0];
      }
    });
  }

  if (!window.Intl) {
    const wa = document.createElement('script');
    /** FIXME: Pin package version due to https://github.com/andyearnshaw/Intl.js/issues/256 */
    wa.src = 'https://unpkg.com/intl@1.2.4/dist/Intl.complete.js';
    wa.onload = () => console.info('🌐 Intl polyfill loaded');
    wa.onerror = console.error;
    document.head.appendChild(wa);
  }

  if (!(Element.prototype.animate)) {
    const wa = document.createElement('script');
    wa.src = 'https://unpkg.com/web-animations-js@latest/web-animations.min.js';
    wa.onload = () => console.info('⚒ Web Animations Next lite loaded');
    wa.onerror = console.error;
    document.head.appendChild(wa);
  }

</script>

my-app.ts

/**
 * Say you've already installed the element via NPM, simply import the package to your application.
 * Here I'm using `lit-element` for developing my application.
 */
import { css, customElement, html, LitElement } from 'lit-element';
import 'app-datepicker';

@customElement(MyApp.is)
export class MyApp extends LitElement {
  static is() { return 'my-app'; }

  static styles = [
    css`
    :host {
      display: block;
    }

    * {
      box-sizing: border-box;
    }
    `
  ];

  protected render() {
    return html`<app-datepicker></app-datepicker>`;
  }
}

index.html

<!doctype html>
<html>
  <!-- Using ES modules to load the app -->
  <script type="module" src="/my-app.js"></script>
  ...
  <body>
    <my-app>
      <!-- <AppDatepicker> will be rendered when <MyApp> loads. -->
    </my-app>
  </body>
  ...
</html> 

Browser compatibility

Both app-datepicker and app-datepicker-dialog works in all major browsers (Chrome, Firefox, IE, Edge, and Safari).

Heavily tested on the following browsers:

Name OS
Edge 17 Windows 10
Edge 15 Windows 10
Internet Explorer 11 Windows 10
Safari 10.1 Mac OS 10.12
Safari 9 Mac OS X 10.11
Firefox 62 (w/o native Shadow DOM) macOS Mojave (10.14)
Chrome 69 (WRE 2019) Windows 10

API references

Demo

Configurable demo powered by CodeSandbox

Older versions

Meantime, feel free to check the older version out at:

  1. 2.x branch - Built with Material Design and Polymer 2, published at Bower.
  2. 3.x branch - Built with Material Design and Polymer 3, published at NPM.

License

MIT License © Rong Sen Ng