Events & instance API

Every picker returns an instance and fires callbacks plus a bubbling DOM event — wire it up however your stack prefers.

Callbacks (options)

onChange	value committed / range partial changed	all
onApply	range applied (start + end)	range
onOpen / onClose	popup shown / hidden	all
onChangeMonthYear	navigated to a new month/year	date-time

DOM events (bubble)

select.nepaliDatePicker	date-time value committed	date-time
apply.nepaliDateRangePicker	range applied	range
select.nepaliMonthPicker	month selected (with AD range)	month

Instance methods

getValue()

setValue(v)

show()

hide()

update(patch)

onChange(cb) → unsubscribe

destroy()

const picker = mountDateTimePicker(input, {
  onChange: (v) => console.log(v.formatted, v.bs, v.ad),
  onClose: () => console.log('closed'),
});

// or subscribe to the returned instance:
const off = picker.onChange((v) => save(v.ad));

// or listen to the bubbling DOM event:
input.addEventListener('select.nepaliDatePicker', (e) => {
  console.log(e.detail.formatted);
});

picker.update({ minDate: 'today' });   // patch options live
picker.destroy();                       // SPA-safe teardown

Choosing an approach

• Callbacks (onChange, onApply) are the simplest, and the only option the data-attribute auto-init path can't use.
• instance.onChange(cb) returns an unsubscribe function, which is what you want when the subscription outlives the mount call — a store subscription, say.
• DOM events bubble, so one delegated listener on a form can serve every picker inside it. This is the path to use with auto-init or a server-rendered page.

Teardown

destroy() is safe to call more than once, and removes the portal, the document-level listeners and any injected hidden fields. In Vue and React the wrapper components call it for you on unmount.