DateRangePicker

TYPESCRIPT / BROWSER

Live TypeScript example

Try the component here, then use the source below in your application.

Component sizev0.9.0 · minified + gzip

JavaScript: 9.0 KiB
Component CSS: 2.0 KiB
Shared theme CSS: 3.8 KiBonce per application

How sizes are measured

The JavaScript figure includes this component’s required helpers. CSS includes its styling dependencies. Each entry is bundled separately for ES2022, minified, then compressed with gzip level 9. Your bundler may share helpers across components. Images, fonts, examples and application code are excluded.

Before compression: JavaScript 25.8 KiB; component CSS 8.0 KiB. These figures describe browser assets, not the complete package download.

View all component measurements →

Preview

Choose two dates or a preset. Selecting the end before the start normalizes the range.

import '@blukavantui/web/theme.css'

import {createDateRangePicker} from '@blukavantui/web/date-range-picker';
import '@blukavantui/web/date-range-picker.css';
export function mount(host:HTMLElement){
  const output=document.createElement("p");output.setAttribute("role","status");host.append(output);
  const picker=createDateRangePicker(host,{
  "StartDate": "2026-10-07",
  "EndDate": "2026-10-13",
  "MinRangeDays": 0,
  "MaxRangeDays": 0,
  "Label": "Report dates",
  "IsDisabled": false,
  "IsReadOnly": false,
  "IsRequired": false,
  "Placeholder": "",
  "ShowClear": true,
  "Min": "",
  "Max": "",
  "Locale": "en-US",
  "DateFormat": "YYYY-MM-DD",
  "FirstDayOfWeek": 1,
  "ShowToday": true,
  "ExtendedClass": "",
  "Presets": [
    {
      "Label": "Last 7 days",
      "StartDate": "2026-10-07",
      "EndDate": "2026-10-13"
    },
    {
      "Label": "This month",
      "StartDate": "2026-10-01",
      "EndDate": "2026-10-13"
    }
  ],
  "DisabledDates": []
}, {
    Change:(start,end)=>{output.textContent=start+" to "+end;},
    ValidationChanged:(valid,message)=>{if(!valid)output.textContent=message;},
  });
  return {destroy(){picker.destroy();output.remove();}};
}

const instance = mount(document.getElementById('example')!)

// When this page or framework component is removed:
// instance.destroy()

Install the library and add the host element

npm install https://blukavantui.blutekmedia.com/downloads/blukavantui-web-0.9.0.tgz

<div id="example"></div>

Download .ts source ↓TypeScript interfaces →Web API reference →Installation guide →

Download TypeScript library · 2984.5 KiB ↓Download starter project · 5191.1 KiB ↓

Connect your application data

This example uses the downloadable @blukavantui/web package. Your application handles persistence and authentication through its typed callbacks. The starter ZIP includes this same example.

Build on your platform

Choose the reference that matches your application.

WEB · TYPESCRIPT

createDateRangePicker

StartDate and EndDate use inclusive ISO calendar dates. MinRangeDays and MaxRangeDays count both endpoints. DisabledDates blocks a range even when the disabled date lies between its endpoints. Supply preset dates from your application to match its timezone and reporting rules.

v0.9.0

import { createDateRangePicker } from '@blukavantui/web/date-range-picker';
import '@blukavantui/web/date-range-picker.css';

Load @blukavantui/web/theme.css once in your app shell.

createDateRangePicker(host: HTMLElement, options?: DateRangePickerOptions, events?: DateRangePickerEvents)

Reference for @blukavantui/web 0.9.0. Required and optional follow the shipped TypeScript declarations; optional does not imply a particular default. Pass typed arrays and objects directly where shown.

Options

Name	Type / requirement	Usage
`StartDate`	`string`Optional	Inclusive ISO start date.
`EndDate`	`string`Optional	Inclusive ISO end date.
`Presets`	`BluDateRangePreset[]`Optional	Optional named date ranges supplied by the consumer.
`MinRangeDays`	`number`Optional	Inclusive number of calendar days. Zero means no additional limit.
`MaxRangeDays`	`number`Optional	Maximum inclusive day count. Zero has no extra limit.
`Label`	`string`Optional	Visible input label and dialog name.
`IsDisabled`	`boolean`Optional	Disables editing and opening.
`IsReadOnly`	`boolean`Optional	Keeps values readable and selectable without editing.
`IsRequired`	`boolean`Optional	Rejects an empty value after interaction.
`Placeholder`	`string`Optional	Optional input placeholder; does not replace the label.
`ShowClear`	`boolean`Optional	Show an explicit Clear action.
`Min`	`string`Optional	Inclusive bounds, in the same stored format as Value.
`Max`	`string`Optional	Inclusive maximum ISO value.
`ExtendedClass`	`string`Optional	Additional classes on the component wrapper.
`Locale`	`string`Optional	BCP 47 locale for calendar month, weekday and date names.
`DateFormat`	`'YYYY-MM-DD' \| 'MM/DD/YYYY' \| 'DD/MM/YYYY'`Optional	Typed date format: YYYY-MM-DD, MM/DD/YYYY or DD/MM/YYYY. Stored dates remain ISO.
`FirstDayOfWeek`	`number`Optional	Sunday=0, Monday=1. Default 1.
`ShowToday`	`boolean`Optional	Show the Today action.
`DisabledDates`	`BluDisabledDate[]`Optional	Unavailable ISO calendar dates. Ranges cannot cross them.

Callbacks

Name	Type / requirement	Usage
`Change`	`(startDate: string, endDate: string) => void \| Promise<void>`Optional	Reports Updated ISO start date., Updated inclusive ISO end date.
`Error`	`(message: string) => void \| Promise<void>`Optional	Reports Configuration or runtime error.
`ValidationChanged`	`(isValid: boolean, message: string) => void \| Promise<void>`Optional	Reports Whether the current entered value is valid., Associated validation guidance.
`OpenChanged`	`(isOpen: boolean) => void \| Promise<void>`Optional	Reports Whether the selection dialog is open.

Instance methods & properties

Name	Signature / type	Usage
`element`	`HTMLElement`	Root owned by this instance. Dispose before removing its host.
`update`	`(patch: Partial<DateRangePickerOptions>) => void`	Apply a partial options update to this instance.
`destroy`	`() => void`	Dispose the instance and its listeners when the view is removed.

Related data types

Expand a type for its fields and allowed values.

BluDateRangePreset

interface BluDateRangePreset {
    Label: string;
    StartDate: string;
    EndDate: string;
}

BluDisabledDate

Calendar date strings are YYYY-MM-DD; local date-times are YYYY-MM-DDTHH:mm.

interface BluDisabledDate {
    Date: string;
}

CalendarOptions

interface CalendarOptions {
    Locale?: string;
    DateFormat?: 'YYYY-MM-DD' | 'MM/DD/YYYY' | 'DD/MM/YYYY';
    /** Sunday=0, Monday=1. Default 1. */
    FirstDayOfWeek?: number;
    ShowToday?: boolean;
    DisabledDates?: BluDisabledDate[];
}

Callback

type Callback<T extends unknown[] = []> = (...args: T) => void | Promise<void>;

CommonOptions

interface CommonOptions {
    ExtendedClass?: string;
}

PickerEvents

interface PickerEvents {
    Change?: Callback<[value: string]>;
    ValidationChanged?: Callback<[isValid: boolean, message: string]>;
    OpenChanged?: Callback<[isOpen: boolean]>;
    Error?: Callback<[message: string]>;
}

PickerOptions

interface PickerOptions extends CommonOptions {
    Label?: string;
    IsDisabled?: boolean;
    IsReadOnly?: boolean;
    IsRequired?: boolean;
    Placeholder?: string;
    ShowClear?: boolean;
    /** Inclusive bounds, in the same stored format as Value. */
    Min?: string;
    Max?: string;
}

Events0No events yet.View events

Interact with an example to see its events.

Live TypeScript example

createDateRangePicker

Options

Callbacks

Instance methods & properties

Related data types

Purpose and use

Keyboard design guidance

In your application

Search BluKavantUI