Date Range Picker

Start/end range with a presets rail, fiscal-year helpers, and a BS/AD switch. It accepts the familiar daterangepicker.js option shape (ranges, opens, drops, autoApply, linkedCalendars), so an existing integration usually ports across with no rewrite.

Framework

Live preview

— pick a value to see the result —

Options

Calendar system

Allow BS/AD toggle swap button on input

Fiscal start month 1–12 (Shrawan = 4)

Auto-apply commit on 2nd click

Presets

Min date Date | 'today' | '-1y'

Max date

Disable weekends

Disable past dates disabledDates demo

Auto-update input write range into field

Clearable (× button)

Allow typing segmented start – end

Server value sent to backend

Display format

Opens horizontal align

Drops vertical direction

All options

Option	Type	Default	Description
`mode`	`'BS' \| 'AD'`	'BS'	Calendar system the range opens in.
`allowModeToggle`	`boolean`	true	Show the BS/AD swap button on the input.
`value / defaultValue`	`{ start, end } \| null`	— (empty)	Controlled / initial range. Empty until set (or use defaultPresetId).
`presets`	`PresetDefinition[] \| 'default' \| false`	'default'	Quick-range rail (includes 'Pick a Month'); false hides it.
`defaultPresetId`	`string \| null`	—	Preset highlighted when the popup opens.
`fiscalStartMonth`	`number (1–12)`	4	BS month the fiscal year starts (Shrawan = 4).
`autoApply`	`boolean`	false	Commit on the second click instead of an Apply button.
`minDate / maxDate`	`Date \| 'today' \| '-1y'`	—	Earliest / latest selectable day.
`disabledWeekdays`	`number[]`	[]	Grey-out weekdays (0 = Sunday … 6 = Saturday).
`maxRangeSpanDays`	`number \| null`	—	Reject ranges longer than N days.
`autoUpdateInput`	`boolean`	true	Write the applied range back into the input text.
`allowInput`	`boolean`	true	Type the range in a segmented `YYYY-MM-DD – YYYY-MM-DD` field (focus selects a section, ↑/↓ step, digits auto-advance, Backspace clears). Set false for read-only.
`displayFormat`	`string`	YYYY-MM-DD	dayjs-style tokens for each bound.
`valueFormat`	`'iso' \| 'iso-bs' \| 'timestamp' \| 'date-object' \| { calendar, format }`	'iso'	Shape of the machine value sent to the server — AD ISO by default, stable no matter the display calendar/format. Exposed on onChange/events and written to altField/submitName.
`submitName`	`string \| { start, end }`	—	Inject hidden field(s) carrying the machine value(s). A string writes a single `start,end` field; `{ start, end }` writes two named fields.
`altField`	`string \| HTMLElement \| { start, end }`	—	Write the machine value(s) into existing field(s) — one combined, or a start/end pair.
`altFormat`	`ValueFormat`	valueFormat	Override the format used for altField / submitName only.
`clearable`	`boolean`	true	Show a × button to clear the current value.
`appendTo`	`string \| HTMLElement`	document.body	Where the popup portal is mounted.
`opens`	`'left' \| 'right' \| 'center' \| 'auto'`	'auto'	Horizontal alignment of the popup relative to the input.
`drops`	`'down' \| 'up' \| 'auto'`	'auto'	Whether the popup opens below or above the input.
`adapter`	`CalendarAdapter`	built-in	Swap the BS↔AD conversion engine (advanced).

Events & callbacks

Name	Payload	Fires when
`onApply`	`DateRangeResult`	A full start→end range was applied.
`onChange`	`{ start?, end? }`	Partial change while picking (first click / preset).
`onOpen`	`()`	Fires when the popup is shown.
`onClose`	`()`	Fires when the popup is hidden.
`apply.nepaliDateRangePicker`	`CustomEvent<DateRangeResult>`	Bubbling DOM event dispatched on the input.

import { mountDateRangePicker } from 'nepali-datepicker-pro';
import 'nepali-datepicker-pro/style.css';

mountDateRangePicker(document.querySelector('#picker'), {});

Real-world example — Report filter

Nepali fiscal year presets (Shrawan start), submits the applied range as two AD ISO fields your backend can drop straight into a BETWEEN query.

import { mountDateRangePicker } from 'nepali-datepicker-pro';
import 'nepali-datepicker-pro/style.css';

mountDateRangePicker(document.querySelector('#picker'), {
  fiscalStartMonth: 4,
  valueFormat: 'iso',
  submitName: { start: 'from_date', end: 'to_date' }
});

Notes

Fiscal years are first class. fiscalStartMonth defaults to 4 (Shrawan), which drives the "This fiscal year" / "Last fiscal year" presets.
onChange fires mid-selection, onApply fires on commit. Use onApply for anything that hits your server; onChange carries a partial { start?, end? } while the user is still picking.
Two-field submission. submitName: { start: 'from_date', end: 'to_date' } writes two hidden inputs, which drops straight into a WHERE date BETWEEN ? AND ? query.

Date Range Picker ​

Notes ​

See also ​

Date Range Picker

Notes

See also