Date & Time Picker

Single date with an optional same-screen time picker. Click the header to jump by month or year, or type straight into the segmented field — it accepts Nepali and ASCII digits alike.

Tweak the options below and the live preview updates in place; the snippet underneath always matches exactly what you're looking at.

Framework

Live preview

— pick a value to see the result —

Options

Calendar system

Allow BS/AD toggle swap button on input

Include time

Time format

Minute step

Earliest hour 0–23 (minTime)

Latest hour 0–23 (maxTime)

Locale

Close on select

Min date Date | 'today' | '+7d'

Max date

Disable weekends

Disable past dates disabledDates demo

Clearable (× button)

Allow typing masked + validated input

Server value sent to backend

Submit name hidden field name

Display format dayjs-style tokens

Opens horizontal align

Drops vertical direction

All options

Option	Type	Default	Description
`mode`	`'BS' \| 'AD'`	'BS'	Calendar system the picker opens in.
`allowModeToggle`	`boolean`	true	Show the BS/AD swap button on the input.
`value / defaultValue`	`Date \| null`	— (empty)	Controlled / initial selected date. Empty until set.
`withTime`	`boolean`	false	Show a same-screen time picker: type into the accessible HH:mm spinbutton fields (Arrow keys step, Nepali digits accepted) or scroll the wheel.
`timeFormat`	`'12h' \| '24h'`	'24h'	Clock style when withTime is on.
`minuteStep`	`number`	1	Increment of the minute spinner.
`minTime / maxTime`	`{ hour, minute }`	—	Clamp the selectable time of day; out-of-range hours show disabled on the wheel.
`disabledTimes`	`(h, m) => boolean`	—	Disable specific hours/minutes on the time wheel.
`defaultTime`	`{ hour, minute }`	now	Time used when withTime turns on with no value.
`locale`	`'ne' \| 'en'`	'ne'	Digit and month-name language.
`minDate / maxDate`	`Date \| 'today' \| '+7d'`	—	Earliest / latest selectable day (relative tokens allowed).
`disabledWeekdays`	`number[]`	[]	Grey-out weekdays (0 = Sunday … 6 = Saturday).
`disabledDates`	`(date) => boolean`	—	Return true to disable a specific day.
`displayFormat`	`string`	YYYY-MM-DD[ HH:mm]	dayjs-style tokens for the input text.
`closeOnSelect`	`boolean`	true unless withTime	Close the popup right after a day is picked.
`allowInput`	`boolean`	true	Make the field a native-<input type=date>-style segmented editor: focus selects a section, ↑/↓ step it, digits fill with auto-advance, ←/→ move sections, Backspace clears, separators are always shown. Validated live; Enter/blur commits. Accepts Nepali or ASCII digits. Set false to keep the field read-only.
`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`	—	Inject a hidden <input name> carrying the machine value (and drop the name from the visible input) so the form submits the right data — select2-style.
`altField`	`string \| HTMLElement`	—	Write the machine value into an existing element/field (CSS selector or node) — jQuery-UI-style altField.
`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`	`DateTimeResult`	A date (and time) was committed.
`onChangeMonthYear`	`(year, month)`	Navigated to a different month/year.
`onOpen`	`()`	Fires when the popup is shown.
`onClose`	`()`	Fires when the popup is hidden.
`select.nepaliDatePicker`	`CustomEvent<DateTimeResult>`	Bubbling DOM event dispatched on the input.

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

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

Real-world example — Appointment booking form

BS-mode date + time, no past dates, submits a clean AD ISO string to the server under a plain <form> field name.

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

mountDateTimePicker(document.querySelector('#picker'), {
  withTime: true,
  minDate: 'today',
  valueFormat: 'iso',
  submitName: 'appointment_date'
});

Notes

Time is not a second popup. With withTime: true the clock sits under the calendar, as accessible HH:mm spinbuttons — Arrow keys step them, the scroll wheel works, and Nepali digits are accepted.
closeOnSelect defaults to true unless withTime is on, so a date-and-time picker stays open long enough to set the time.
Constraints accept relative tokens. minDate: 'today', maxDate: '+1m' and friends are resolved at open time, not at mount time.

Date & Time Picker ​

Notes ​

See also ​

Date & Time Picker

Notes

See also