Month Picker

Pick one BS month for a monthly report or payslip — the picker returns the AD date range that month covers, so your query doesn't need to know anything about Bikram Sambat.

Framework

Live preview

— pick a value to see the result —

Options

Locale Nepali (ne)English (en)

Display format

Min year (BS)

Max year (BS)

Clearable (× button)

Allow typing segmented YYYY-MM

Server value sent to backendAD ISO (default)BS ISOUnix timestamp

Submit name hidden field name

Opens horizontal alignautoleftrightcenter

Drops vertical directionautodownup

All options

Option	Type	Default	Description
value / defaultValue	{ year, month } | null	— (empty)	Controlled / initial selected BS month. Empty until set.
locale	'ne' | 'en'	'ne'	Digit and month-name language.
minYear / maxYear	number (BS)	1970 / 2100	Range of BS years the grid can navigate.
displayFormat	string	MMMM YYYY	dayjs-style tokens for the input text.
allowInput	boolean	true	Type the month in a segmented `YYYY-MM` field (↑/↓ step, digits auto-advance, Backspace clears). Set false for read-only.
valueFormat	'iso' | 'iso-bs' | 'timestamp' | { calendar, format }	'iso'	Format of the machine value(s). A month is emitted as a date RANGE (first→last day), so onChange/events carry startValue, endValue and value ("start,end").
submitName	string | { start, end }	—	Inject hidden field(s) for the month’s date range. A string writes one `start,end` field; `{ start: "from_date", end: "to_date" }` writes two — perfect for `WHERE date BETWEEN from AND to` reporting.
altField	string | HTMLElement | { start, end }	—	Write the month’s range 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
onChange	MonthResult	A month was selected. Payload: { year, month, start, end (AD Dates), startValue, endValue, value ("from,to"), formatted }.
onOpen	()	Fires when the popup is shown.
onClose	()	Fires when the popup is hidden.
select.nepaliMonthPicker	CustomEvent<MonthResult>	Bubbling DOM event dispatched on the input.

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

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

Real-world example — Payroll filter

Pick a single BS month for a payslip; the picker resolves it to the AD first/last-day range and writes both bounds to hidden fields.

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

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

Notes

• A month is emitted as a range. onChange carries { year, month, start, end, startValue, endValue, value, formatted }, where start/end are the AD Dates for the first and last day of the BS month.
• value is the "start,end" pair, which is what a single submitName string writes. Pass { start, end } instead to get two named fields.
• minYear / maxYear bound the grid in BS years, defaulting to the validated 1970–2100 window.

See also

• Helper functions — BS.GetDaysInMonth and friends, if you need the math alone
• Events & instance API