Need help with app-datepicker?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

motss
150 Stars 47 Forks MIT License 713 Commits 14 Opened issues

Description

Datepicker element built with Google's lit-element and Material Design 2

Services available

!
?

Need anything else?

Contributors list

# 152,597
lit-htm...
GraphQL
dom-man...
js
667 commits
# 123,883
polymer...
TypeScr...
dns-pro...
angular...
2 commits
# 130,137
TypeScr...
HTML
workbox
vue3
1 commit
# 298,821
TypeScr...
lit-htm...
lit-ele...
PHP
1 commit
# 743,841
TypeScr...
HTML
lit-htm...
lit-ele...
1 commit
# 692,765
TypeScr...
HTML
lit-htm...
lit-ele...
1 commit
# 37,250
TypeScr...
express...
Electro...
serialp...
1 commit
# 484,535
TypeScr...
HTML
lit-htm...
lit-ele...
1 commit
# 736,908
TypeScr...
HTML
lit-htm...
lit-ele...
1 commit
# 191,037
TypeScr...
HTML
lit-htm...
leaflet
1 commit
# 122,606
TypeScr...
telnet
PHP
slimerj...
1 commit

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

ci Sauce Labs Dependency Status

codebeat badge Language grade: JavaScript Code of Conduct

A different way of

datepicker
-ing 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.

app-datepicker

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 <!-- omit in toc -->

Pre-requisite

  • ES2019 (The element is compiled with features targeting ES2019, so it might not work properly without transpilation on older browsers.)
  • lit-element >= 2.2.1
  • OPTIONAL >= 3.8.3 (TypeScript users only)

Installation

  • NPM
  $ npm i app-datepicker
  • 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 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:

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

  
  

...

<my-app>
  <!-- <AppDatepicker> will be rendered when <MyApp> loads. -->
</my-app>

...

Browser compatibility

Both

app-datepicker
and
app-datepicker-dialog
works in last 2 versions of all evergreen browsers (Chrome, Firefox, Edge, and Safari). Internet Explorer 11 is no longer supported in favor of the new Microsoft Edge.

Tested on the following browsers:

| Name | OS | | --- | --- | | Chrome 79 | Windows 10 | | Edge 18 | Windows 10 | | Firefox 72 | Windows 10 | | Safari 13 | mac 10.13 |

Q&A

  1. 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-datepicker
    inside mwc-dialog.
    // Simplified code snippet
    
    class MWCDatePicker extends LitElement {
      render() {
        return html`
        
          
    
          cancel
          set
        
        `;
      }
    }
    
  2. How can I hide the focus outline?

    For a11y reason, focus outline is shown when a calendar day is being focused. However, this can be modified via CSS Shadow Parts.

    /**
     * Hide focus ring.
     * 
     * NOTE: It is recommended to come up with alternative styling for focus state
     * instead of just hiding the focus ring.
     */
    app-datepicker::part(calendar-day):focus {
      outline: none;
    }
    

API references

Demo

Configurable demo powered by Firebase

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.