@itzsa/nepali-datepicker

React Nepali (Bikram Sambat) date pickers — calendar select, editable YYYY-MM-DD input, and date range — plus pure AD ↔ BS helpers.

For headless convert / arithmetic / holidays without UI, use @itzsa/bs-date (docs).

Install

pnpm add @itzsa/nepali-datepicker

@import "@itzsa/nepali-datepicker/styles.css";

Components

Calendar picker

import { NepaliDatePicker } from "@itzsa/nepali-datepicker";

<NepaliDatePicker value={date} onChange={setDate} locale="ne" />

Editable input (type + calendar)

import { EditableNepaliDatePicker, isCompleteBsDate } from "@itzsa/nepali-datepicker";

<EditableNepaliDatePicker value={date} onChange={setDate} placeholder="YYYY-MM-DD" />

Digits are auto-masked to YYYY-MM-DD. Use isCompleteBsDate(value) before submit.

Date & time

import { NepaliDateTimePicker } from "@itzsa/nepali-datepicker";

<NepaliDateTimePicker
  value={dateTime}
  onChange={setDateTime}
  locale="ne"
  minuteStep={1}
  displayFormat="time-date-single-no-bs"
  minDateTime="2080-01-01 00:00"
  maxDateTime="2090-12-30 23:59"
/>

Canonical value: YYYY-MM-DD HH:mm (optional seconds with withSeconds). minuteStep defaults to 1 (every minute).

Live Nepali clock

import { NepaliLiveClock } from "@itzsa/nepali-datepicker";

<NepaliLiveClock format="time-date-two-line-seconds" locale="ne" />
<NepaliLiveClock format="dmyw" />
<NepaliLiveClock format="date-only" bsPrefix={false} />

Presets: time-date-two-line, time-date-two-line-seconds, time-date-single, time-date-single-no-bs, time-only, date-only, dmyw, date-only-no-bs, time-date-bare. Or format once with formatNepaliDateTimeDisplay(parts, format).

Date range

import { NepaliDateRangePicker } from "@itzsa/nepali-datepicker";

<NepaliDateRangePicker
  value={range}
  onChange={setRange}
  numberOfMonths={2}
  locale="ne"
/>

value is { from?: string; to?: string } (ASCII BS dates).

Helpers

AD ↔ BS conversion is powered by @itzsa/bs-date (docs). The datepicker keeps the familiar (year, month, day) → DateParts API:

import { adToBs, bsToAd, todayBs, diffBsDays } from "@itzsa/nepali-datepicker";

bsToAd(2080, 10, 15); // { year: 2024, month: 1, day: 29 }
adToBs(2025, 4, 14);  // { year: 2082, month: 1, day: 1 }

For headless apps (no React), depend on @itzsa/bs-date directly.

Calendar data: BS 1970–2100 (shared with @itzsa/bs-date).

Styling via props

<NepaliDatePicker
  value={date}
  onChange={setDate}
  vars={{ accent: "#0f766e", radius: "12px" }}
  classNames={{ input: "h-10", popover: "shadow-lg" }}
/>

Validation

import { validateBsDate, isCompleteBsDate } from "@itzsa/nepali-datepicker";

validateBsDate(2082, 1, 15); // { ok: true }
isCompleteBsDate("2082-04"); // false — still typing

You do not need the jQuery plugin’s compressed calendar codec — month lengths and AD↔BS come from @itzsa/bs-date.

Docs

https://itzsa.acharya-suman.com.np/nepali-datepicker

License

MIT