<date-range-picker>

A Lit-based web component for picking date ranges.

Install

npm install @wesbos/date-range-picker

Use

<script
  type="module"
  src="./node_modules/@wesbos/date-range-picker/dist/date-range-picker.js"
></script>

<date-range-picker value="2026-12-25/2027-01-01"></date-range-picker>

Or from JS / TS:

import "@wesbos/date-range-picker";

const picker = document.querySelector("date-range-picker");

picker.addEventListener("change", (e) => {
  // e.detail: { start: "YYYY-MM-DD", end: "YYYY-MM-DD", duration: string }
  console.log(picker.startDate, picker.endDate);
});

API

| Member | Type | Description | | ------------------- | ------------------------------------- | ----------------------------------------------------------------------- | | value (attr/prop) | string | Range as "YYYY-MM-DD/YYYY-MM-DD". Reflected. Empty string = no range. | | startISO | string | Start of range, or "". | | endISO | string | End of range, or "". | | startDate | Date \| null | Start as a local-midnight Date. | | endDate | Date \| null | End as a local-midnight Date. | | change event | CustomEvent<{start, end, duration}> | Bubbles. Fires when the range changes. |

Develop

npm run dev     # serves demo.html / index.html at http://localhost:3000
npm run build   # produces dist/date-range-picker.js + .d.ts
npm run test    # Playwright e2e