# @edirect/app-datepicker

> A datepicker element based on Google's Material Design built from scratch with Polymer

Latest version **3.3.3** (published 2022-11-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @edirect/app-datepicker
pnpm add @edirect/app-datepicker
yarn add @edirect/app-datepicker
bun add @edirect/app-datepicker
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 3.3.3 |
| Published | 2022-11-18 |
| First published | 2020-03-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 8.16.0 |
| Dependencies | 8 |
| Unpacked size | 122.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 177 |
| Author | Rong Sen Ng |
| Maintainers | danielkhalebbatista, andsfranbolt, guilherme_benedeti, pauloazevedo-ed, rafael.jourdan, marcus.gomes, joaoferreirabolttech, iquirino.bolttech, lukaspiccinibt, adailson.bolttech, achraf.ely, palvares_bolttech, plinio.altoe, magdiel.campelo, lucasfabre-bolt, edirectamorim, ricardo.coelho, layunne-bolttech, mayko.calazans, david.pereira, paulomarchi |
| Keywords | cal, calendar, date, date-picker, datepicker, picker, polymer, web-component, web-components |

## Links

- npm: https://www.npmjs.com/package/@edirect/app-datepicker
- Repository: https://github.com/motss/app-datepicker
- Issues: https://github.com/motss/app-datepicker/issues
- npm.io page: https://npm.io/package/@edirect/app-datepicker

## Dependencies (8)

- [@polymer/polymer](https://npm.io/package/@polymer/polymer.md) ^3.3.1
- [@polymer/iron-list](https://npm.io/package/@polymer/iron-list.md) ^3.1.0
- [@polymer/paper-button](https://npm.io/package/@polymer/paper-button.md) ^3.0.1
- [@polymer/iron-selector](https://npm.io/package/@polymer/iron-selector.md) ^3.0.1
- [@polymer/neon-animation](https://npm.io/package/@polymer/neon-animation.md) ^3.0.1
- [@polymer/iron-iconset-svg](https://npm.io/package/@polymer/iron-iconset-svg.md) ^3.0.1
- [@polymer/paper-icon-button](https://npm.io/package/@polymer/paper-icon-button.md) ^3.0.2
- [@polymer/paper-dialog-behavior](https://npm.io/package/@polymer/paper-dialog-behavior.md) ^3.0.1

## Alternatives

- [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads
- [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads
- [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads
- [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads

## Recent versions

- 3.3.3 (latest) — 2022-11-18
- 3.3.2 — 2022-11-07
- 3.3.1 — 2021-03-25
- 3.3.0 — 2021-02-10
- 3.2.0 — 2021-02-09
- 3.1.9 — 2020-12-01
- 3.1.8 — 2020-11-19
- 3.1.7 — 2020-06-04
- 3.1.6 — 2020-06-04
- 3.1.5 — 2020-04-08
- 3.1.3 — 2020-04-08
- 3.1.2 — 2020-04-06
- 3.1.1 — 2020-03-30
- 3.1.0 — 2020-03-30
- 4.0.0-rc.52 — 2020-03-30

## README

<div align="center" style="text-align: center;">
  <h1 style="border-bottom: none;">app-datepicker</h1>

  <p>Material Design datepicker built with Polymer 3</p>
</div>

<hr />

[![GitHub version](https://badge.fury.io/gh/motss%2Fapp-datepicker.svg)](http://badge.fury.io/gh/motss%2Fapp-datepicker)
[![Build Status](https://travis-ci.org/motss/app-datepicker.svg?branch=master)](https://travis-ci.org/motss/app-datepicker)
[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/motssapp-datepicker)
[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/motssapp-datepicker.svg)](https://vaadin.com/directory/component/motssapp-datepicker)

![img-app-datepicker](https://cloud.githubusercontent.com/assets/10607759/26274668/48b75cce-3d81-11e7-81aa-b79ab9b90d36.png)

<!-- ![light-themed-app-datepicker-landscape](https://cloud.githubusercontent.com/assets/10607759/10119266/ce6d5b0e-64c3-11e5-843d-1310de755315.png)
![dark-themed-app-datepicker-portrait](https://cloud.githubusercontent.com/assets/10607759/10119265/c9ad900c-64c3-11e5-937e-338a770eebea.png) -->
<!-- ![app-datepicker-landscape](https://cloud.githubusercontent.com/assets/10607759/9871233/c9e33d04-5bc4-11e5-8af9-d93d080d8815.PNG) -->
<!-- ![app-datepicker-portrait](https://cloud.githubusercontent.com/assets/10607759/9871234/cacf33c6-5bc4-11e5-833a-96cbd3dbf440.PNG) -->
<!-- ![dark-themed-app-datepicker](https://cloud.githubusercontent.com/assets/10607759/10106751/1bec71c0-63e9-11e5-93f2-ee197d2ba0f2.png) -->

See the [component page](http://motss.github.io/app-datepicker/components/app-datepicker/) for more information.

## Update (v3.0.0) - Breaking changes

- **Upgraded to Polymer 3 stable.**
- **Moved to NPM.**
- Recommended to include the Intl polyfill and web-animations-js polyfill at the top document level.

  ```html
  <app-datepicker></app-datepicker>
  <app-datepicker view="horizontal"></app-datepicker>
  <app-datepicker theme="dark-theme"></app-datepicker>
  <app-datepicker-dialog modal></app-datepicker-dialog>
  <app-datepicker-dialog with-backdrop></app-datepicker-dialog>
  <app-datepicker-dialog></app-datepicker-dialog>
  ```

`app-datepicker` provides a regular datepicker element.
While `app-datepicker-dialog` has a `app-datepicker` being wrapped inside a dialog.

~~## ( Coming soon!) Generating your own boilerplate code of the compounds~~
~~At the end of the demo, there is a section where user can play around with to generate your own boilerplate code with the attributes provided.~~

## Styling

Now with mixins, head over to the [component page](http://motss.github.io/app-datepicker/components/app-datepicker/) for more details.

## Getting Started

1. Install with npm.

    ```sh
    $ npm i app-datepicker
    ```

2. (Optional) Load the dependencies and the [Intl][intl-polyfill-url] and [web-animations-js][web-animations-js-polyfill-url] polyfills on unsupported browsers:

    ```html
    <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.1/web-animations-next.min.js"></script>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale"></script>
    ```

3. Load element in HTML or JS.

    ```html
    <!-- In HTML, load with script[type=module], either `app-datepicker` -->
    <script type="module" href="/node_modules/app-datepicker/app-datepicker.js"></script>

    <!-- or, `app-datepicker-dialog` -->
    <!-- <script type="module" src="/node_modules/app-datepicker/app-datepicker-dialog.js"></script> -->
    ```

    ```js
    // Alternatively, loading element in JavaScript.
    ...
    import 'app-datepicker/app-datepicker.js';
    ...
    ```

## Browser Support

### `app-datepicker` and `app-datepicker-dialog`:

Same as that of [Polymer 3][polymer-3-browser-support-url].


### [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)

ECMAScript Internationalization API for `locale`. For more details please visit [Can I use... Intl?](http://caniuse.com/#search=intl):

| ![Internet Explorer](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/internet-explorer/internet-explorer_48x48.png) | ![Microsoft Edge](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/edge/edge_48x48.png) | ![Mozilla Firefox](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/firefox/firefox_48x48.png) ![Mozilla Firefox Developer Edition](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/firefox-developer-edition/firefox-developer-edition_48x48.png) | ![Google Chrome](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/chrome/chrome_48x48.png) ![Google Chrome Canary](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/archive/chrome-canary_19-48/chrome-canary_19-48_48x48.png) | ![Opera](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/opera/opera_48x48.png) ![Opera Developer Edition](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/opera-developer/opera-developer_48x48.png) | ![Safari](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/safari/safari_48x48.png) ![Safari Technology Preview](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/safari-technology-preview/safari-technology-preview_48x48.png)
| --- | --- | --- | --- | --- | --- |
| 11 | 12+ | latest | latest | latest | 10+ **

___** [Intl Polyfill for unsupported browsers](intl-polyfill-url)___

## Throughput

[![Throughput Graph](https://graphs.waffle.io/motss/app-datepicker/throughput.svg)](https://waffle.io/motss/app-datepicker/metrics/throughput)

## License

[MIT License](http://motss.mit-license.org/) © Rong Sen Ng

[intl-polyfill-url]: https://github.com/andyearnshaw/Intl.js
[web-animations-js-polyfill-url]: https://www.npmjs.com/package/web-animations-js
[polymer-3-browser-support-url]: https://polymer-library.polymer-project.org/3.0/docs/browsers

---
_Source: https://npm.io/package/@edirect/app-datepicker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._