app-datepicker

Datepicker element built with lit and Material Design 2021

Pre-requisite
Installation
How to use
- Polyfills
- ES Modules
  - my-app.js
  - index.html
Browser compatibility
Q&A
API references
Demo
Older versions
License

Miracle happens when marrying Material Design with date pickers on the web.

💯 Also, featured in awesome-lit-html.

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.

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:

Pre-requisite
Installation
How to use
- Polyfills
- ES Modules
  - my-app.js
  - index.html
Browser compatibility
Q&A
API references
Demo
Older versions
License

Pre-requisite

ES2019 (The element is compiled with features targeting ES2019, so it might not work properly without transpilation on older browsers.)
lit >= 2.2.0
[OPTIONAL] TypeScript >= 4.5.5 (TypeScript users only)

Installation

NPM
```
$ npm i app-datepicker@next
```
Alternatively, it can be downloaded from any of the following awesome CDNs:
1. esm.run/ jsdelivr
2. esm.sh

How to use

Polyfills

Please make sure you have all these features available on the browsers you are supporting. If no, please consider polyfill-ing 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) {
        var filtered = this.filter(cb);
        return !filtered.length ? void 0 : filtered[0];
      },
    });
  }

  if (!window.Intl) {
    var wa = document.createElement('script');
    /** NOTE: Pin package version due to https://github.com/andyearnshaw/Intl.js/issues/256 */
    wa.src = 'https://esm.run/[email protected]/dist/Intl.complete.js';
    wa.onload = function onLoad() { console.info('🌐 Intl polyfill loaded'); };
    wa.onerror = console.error;
    document.head.appendChild(wa);
  }
</script>

ES Modules

my-app.js

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

const localName = 'my-app';

@customElement(localName)
export class MyApp extends LitElement {
  static styles = [
    css`
    :host {
      display: block;
    }

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

  render() {
    return html`<app-date-picker></app-date-picker>`;
  }
}

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

All the elements work in last 2 versions of all evergreen browsers (Chrome/ Edge, Firefox, and Safari). Internet Explorer 11 is no longer supported in favor of the new Microsoft Edge.

Tested on the following browsers:

Chrome/ Edge 100
Firefox 96
Safari 15.4

Not tested on the following browsers but it should work with all the polyfills needed:

Edge 18 and below
Safari 13.1 and below

Q&A

Does it work well with material-components-web-components?

For material-components-web-components users, you can create your own custom date picker element by wrapping app-date-picker inside mwc-dialog.

// Simplified code snippet

class MWCDatePicker extends LitElement {
  render() {
    return html`
    <mwc-dialog>
      <app-date-picker></app-date-picker>

      <mwc-button slot="secondaryAction" dialogAction="cancel">cancel</mwc-button>
      <mwc-button slot="primaryAction" dialogAction="set">set</mwc-button>
    </mwc-dialog>
    `;
  }
}

antoniogagos / app-datepicker Goto Github PK

app-datepicker's Introduction

app-datepicker

Table of contents

Table of contents

Pre-requisite

Installation

How to use

Polyfills

ES Modules

my-app.js

index.html

Browser compatibility

Q&A

API references

Demo

Older versions

License

app-datepicker's People

Contributors

Watchers

Forkers

Recommend Projects

Recommend Topics

Recommend Org