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

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