@bornova/DateRangePicker

Usage

Installation

Install via npm:

npm install @bornova/daterangepicker

ES Module

Import the picker and its stylesheet from your bundler:

          
            import DateRangePicker from '@bornova/daterangepicker'
            import '@bornova/daterangepicker/dist/daterangepicker.css'
          
        

Browser (script tag)

Load Luxon 3.x before the picker. Pin to a specific version (e.g. @bornova/daterangepicker@1.0.0) for production.

          
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@bornova/daterangepicker/dist/daterangepicker.css" />
            <script src="https://cdn.jsdelivr.net/npm/luxon@3/build/global/luxon.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/@bornova/daterangepicker/dist/browser/daterangepicker.min.js"></script>
          
        

Quick Start

The constructor accepts a CSS selector or DOM element, an options object, and an optional callback fired on apply. The callback receives Luxon DateTime objects for start and end, plus the predefined range label (chosenLabel, or null for a custom range).

          
            <input type="text" id="daterange" />
          
        

          
            const picker = new DateRangePicker(
              '#daterange',
              {
                startDate: '01/01/2025',
                endDate: '01/31/2025'
              },
              (start, end, chosenLabel) => {
                console.log(start.toISODate(), end.toISODate())
              }
            )
          
        

Alternate Elements

Button Trigger

The picker can attach to any element, not just <input>. When attached to a <button>, it opens on click and focus. Use the apply event to update the button label manually, since autoUpdateInput only writes to <input> elements.

          
            const btn = document.querySelector('#btn-trigger')

            const picker = new DateRangePicker(btn, { autoUpdateInput: false })

            picker.on('apply', (start, end) => {
              btn.textContent = `${start.toFormat('MM/dd/yyyy')} - ${end.toFormat('MM/dd/yyyy')}`
            })
          
        

Options

Picker

Calendars

Dates

Time

Duration

Ranges

Footer

Custom Classes

Locale

data-* Attributes

All scalar options (booleans, numbers, and strings) can be set directly on the element via data-* attributes using kebab-case — no JavaScript configuration needed. The picker below is initialised with a single new DateRangePicker('#data-trigger') call; all other options come from the markup.

          
            <input
              id="data-trigger"
              data-start-date="01/09/2026"
              data-end-date="02/25/2026"
              data-show-week-numbers="true"
              data-highlight-today="true"
              data-open-direction="left"
            />

            <script>
              new DateRangePicker('#data-trigger')
            </script>
          
        

Options requiring objects, arrays, or functions — such as ranges, disabledDates, dayClassFn, and locale — must be passed via the constructor.

Methods

All methods operate on the same picker instance.

Events

All events are dispatched as CustomEvents on the attached element. Listen with element.addEventListener(name, fn) or use the on() method. For show/hide, event.detail is the internal picker instance. For apply/cancel, event.detail is an object containing selection data (startDate, endDate, and optional chosenLabel). The custom change event fires only when a committed selection is different from the previously committed selection; its payload includes old and new values. For clear, event.detail is an empty object.