patro

Appearance

1.0 beta · typing, ranges, two months, presets →

patroAD and BS dates for React

A calendar and datepicker for Gregorian and Bikram Sambat dates, side by side. Accessible, ready for real forms and server rendering, with AD ↔ BS conversion built in.

Get started
Try it
GitHub
$ npm i patrojs@beta

Two calendars, any language

Show BS or AD, with names in English or Nepali and Latin or Devanagari digits, chosen independently.

Dates or ranges

Single days or start–end ranges, with length limits, booked-day exclusion, presets and two months side by side.

Built for real forms

Type or pick dates, submit them with native forms in AD or BS, and validate with required and invalid states.

Accessible by default

The WAI-ARIA date picker keyboard pattern, screen-reader names in English or Nepali, AA contrast, high-contrast mode.

Server-rendering safe

Works in Next.js and Remix with no hydration mismatches. The date utilities run on the server too.

Yours to theme

Every colour, radius and size is a CSS token, with opt-in dark mode. Real BS data from 1978 to 2099.

Playground

Try it

Switch calendars, pick a day or a range, or type a date like 2083-07-12 into the Datepicker. The panel shows exactly what onChange gives you.

Every prop, live, in Storybook (coming soon) →

Quick start

Up and running in a minute ​

1Install ​

bash
npm i patrojs@beta

2Add the styles ​

js
import 'patrojs/style.css';

3Pick a date ​

tsx
import { Datepicker } from 'patrojs';

<Datepicker calendar='BS' />
Read the guideProps reference

Released under the MIT License.

patro