https://github.com/abelgarcia2/date-picker

A simple date picker web component built with Vanilla JS 🗓️
https://github.com/abelgarcia2/date-picker

date-picker datepicker vanilla-javascript vanilla-js web-component webcomponent

Last synced: 11 days ago
JSON representation

A simple date picker web component built with Vanilla JS 🗓️

• Host: GitHub
• URL: https://github.com/abelgarcia2/date-picker
• Owner: abelgarcia2
• License: gpl-3.0
• Created: 2024-04-17T19:09:27.000Z (9 months ago)
• Default Branch: master
• Last Pushed: 2024-05-02T21:16:54.000Z (8 months ago)
• Last Synced: 2024-10-16T00:33:26.908Z (3 months ago)
• Topics: date-picker, datepicker, vanilla-javascript, vanilla-js, web-component, webcomponent
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/@abelgarcia2/date-picker
• Size: 25.4 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: COPYING

Awesome Lists containing this project

README

        
# <date-picker/>

[](https://www.npmjs.com/package/@abelgarcia2/date-picker)

[](https://www.gnu.org/licenses/gpl-3.0.en.html)

A simple date picker web component built with Vanilla JS 🗓️



    



## Usage

First import the component

```html

```

Then use the component in your html

```html

```

Get selected date

```js

document.getElementById("picker").getSelectedDate()

```

Listen to changes

```js

let picker = document.getElementById("picker");

picker.addEventListener('changeDate', (event) => console.log(event.detail));

```

## Example

See working example at [codi.link](https://codi.link/PGRhdGUtcGlja2VyIGlkPSJwaWNrZXIiIHN0eWxlPSJ3aWR0aDogMzAwcHg7Ij48L2RhdGUtcGlja2VyPgo8YnIvPgo8c3Bhbj5TZWxlY3RlZCBkYXRlIGlzOiA8L3NwYW4+PHNwYW4gaWQ9InNlbGVjdGVkLWRhdGUiPjwvc3Bhbj4KCjxzY3JpcHQgc3JjPSJodHRwczovL3VucGtnLmNvbS9AYWJlbGdhcmNpYTIvZGF0ZS1waWNrZXJAMC4xLjItZGV2L2Rpc3QvYnVuZGxlLm1pbi5qcyI+PC9zY3JpcHQ+||bGV0IHBpY2tlciA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwaWNrZXInKTsKCmNvbnN0IHNldFNlbGVjdGVkRGF0ZSA9IChzZWxlY3RlZERhdGUpID0+IHsKICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnc2VsZWN0ZWQtZGF0ZScpLnRleHRDb250ZW50ID0gc2VsZWN0ZWREYXRlOwp9OwoKc2V0U2VsZWN0ZWREYXRlKHBpY2tlci5nZXRTZWxlY3RlZERhdGUoKS50b0RhdGVTdHJpbmcoKSk7CgpwaWNrZXIuYWRkRXZlbnRMaXN0ZW5lcignY2hhbmdlRGF0ZScsIChlKSA9PiBzZXRTZWxlY3RlZERhdGUoZS5kZXRhaWwudG9EYXRlU3RyaW5nKCkpKQo=)