# @k1laba/st-datepicker

> Datepicker web component implementation with Stenciljs

Latest version **1.7.5** (published 2020-04-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @k1laba/st-datepicker
pnpm add @k1laba/st-datepicker
yarn add @k1laba/st-datepicker
bun add @k1laba/st-datepicker
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.7.5 |
| Published | 2020-04-12 |
| First published | 2020-03-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | k1laba |
| Maintainers | k1laba |

## Links

- npm: https://www.npmjs.com/package/@k1laba/st-datepicker
- Repository: https://github.com/k1laba/st-datepicker
- Homepage: https://github.com/k1laba/st-datepicker#readme
- Issues: https://github.com/k1laba/st-datepicker/issues
- npm.io page: https://npm.io/package/@k1laba/st-datepicker

## Dependencies (1)

- [moment](https://npm.io/package/moment.md) ^2.24.0

## Recent versions

- 1.7.5 (latest) — 2020-04-12
- 1.7.4 — 2020-04-10
- 1.7.3 — 2020-04-03
- 1.7.2 — 2020-04-03
- 1.7.1 — 2020-04-02
- 1.7.0 — 2020-04-02
- 1.6.2 — 2020-03-28
- 1.6.1 — 2020-03-28
- 1.6.0 — 2020-03-28
- 1.5.3 — 2020-03-21
- 1.5.2 — 2020-03-21
- 1.5.1 — 2020-03-14
- 1.5.0 — 2020-03-14
- 1.4.0 — 2020-03-08
- 1.3.0 — 2020-03-08
- … 5 more at https://npm.io/package/@k1laba/st-datepicker/versions

## README

![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)


# Demo

https://k1laba.github.io/st-datepicker/

## Installation

Add a script tags in your html

```
  <script type="module" src="https://unpkg.com/@k1laba/st-datepicker/dist/st-datepicker/st-datepicker.esm.js"></script>
  <script nomodule="" src="https://unpkg.com/@k1laba/st-datepicker/dist/st-datepicker/st-datepicker.js"></script>
```

only one of them will be loaded for users

## Examples

To show date picker:

```
  <st-datepicker from="2010" to="2025"></st-datepicker>
```

subscribe to date change:

```
  window.onload = () => {
    const dateEl = document.querySelector('st-datepicker');
    const resultEl = document.querySelector('#date-result');
    dateEl.addEventListener('dateChanged', (e) => resultEl.innerHTML = e.detail.toDateString());
  };

```

get date from date picker:

```
  (async () => {
    resultEl.innerHTML = (await dateEl.getDate()).toDateString();
  })();
```

for more details on datepicker available parameters visit [st-datepicker](src/components/st-datepicker/readme.md)



To show date range picker:

```
  <st-daterangepicker></st-daterangepicker>
```

subscribe to date range change:

```
  window.onload = () => {
    const rangeEl = document.querySelector('st-daterangepicker');
    const rangeResultEl = document.querySelector('#range-result');
    rangeEl.addEventListener('dateChanged', (e) => {
      rangeResultEl.innerHTML = e.detail.start.toDateString() + ' - ' + e.detail.end.toDateString();
    });
  };

```

get date range from date range picker:

```
  (async () => {
    const rangeInfo = await rangeEl.getDateRange();
    rangeResultEl.innerHTML = rangeInfo.start.toDateString() + ' - ' + rangeInfo.end.toDateString();
  })();
```

for more details on daterangepicker available parameters visit [st-daterangepicker](src/components/st-daterangepicker/readme.md)

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