Open source · v1.0.0

The Nepali date picker for modern React.

Real Bikram Sambat arithmetic, English and Nepali localisation, single and range selection, and a typed adapter API—ready for production interfaces.

Read the documentation Open the live demo

npm install bos-nepali-date

Live component

Loading the picker…

100 BS yearsCalendar data included

English + नेपालीNative interface localisation

TypeScriptTypes included with the package

0 dependenciesReact remains a peer dependency

A complete component

Calendar behavior without the calendar project.

The awkward parts—BS month lengths, conversion, masking, range state, accessibility, and localisation—are already handled. Your application keeps control of the value and the visual theme.

True Bikram Sambat arithmetic

Day-by-day conversion backed by bundled BS year data, not a Gregorian approximation.

Single and range workflows

Use a compact date field, dual-month range picker, presets, or explicit apply and cancel actions.

Nepali localisation

Localise digits, weekdays, and month names while keeping emitted values predictable for application code.

Adapter-first design

Use the included adapter or bring a conversion table through the documented BsAdapter interface.

Production input states

Sizes, visual variants, validation status, disabled dates, popover placement, and controlled visibility.

Accessible by default

Keyboard dismissal, real buttons, labelled fields, focus management, and motion-sensitive behavior.

Small API, useful defaults

Install it. Control it. Ship it.

The component follows familiar controlled React patterns. Import its stylesheet once, pass the adapter, and keep the selected BS date in your own state.

Start building TypeScript API

Example.tsxReact

import { useState } from 'react'
import {
  NepaliDatePicker,
  defaultAdapter
} from 'bos-nepali-date'
import 'bos-nepali-date/style'

export function PublicationDate() {
  const [date, setDate] = useState(null)

  return <NepaliDatePicker
    value={date}
    onChange={setDate}
    adapter={defaultAdapter}
    menu={{ lang: 'ne' }}
  />
}

See every prop in context.

Use the interactive demo, then copy the generated component configuration.

Explore the demo