@edirect/app-datepicker
Advanced tools
A custom datepicker element based on Google's Material Design built from scratch with lit-element
Datepicker element built with lit-element and Material Design 2
A different way of
datepicker-ing on the web.🛠 While it is still in RC release, feel free to try it out.
💯 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:
mwc-dialog>NPM
$ npm i app-datepicker@next
Alternatively, it can be downloaded from any of the following awesome CDNs:
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) {
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);
}
</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>
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 |
mwc-dialog>For material-components-web-components users, you can create your own custom date picker element by wrapping app-datepicker inside mwc-dialog.
Feasible source code can be viewed here.
// Simplified code snippet
class MWCDatePicker extends LitElement {
render() {
return html`
<mwc-dialog>
<app-datepicker></app-datepicker>
<mwc-button slot="secondaryAction" dialogAction="cancel">cancel</mwc-button>
<mwc-button slot="primaryAction" dialogAction="set">set</mwc-button>
</mwc-dialog>
`;
}
}
Configurable demo powered by Firebase
Meantime, feel free to check the older version out at:
2.x branch - Built with Material Design and Polymer 2, published at Bower.3.x branch - Built with Material Design and Polymer 3, published at NPM.MIT License © Rong Sen Ng
FAQs
A datepicker element based on Google's Material Design built from scratch with Polymer
The npm package @edirect/app-datepicker receives a total of 5 weekly downloads. As such, @edirect/app-datepicker popularity was classified as not popular.
We found that @edirect/app-datepicker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 21 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.