NepaliKitv0.1.0
Packages/date-picker-bs

date-picker-bs

A customizable Bikram Sambat (Nepali) date picker and calendar built with Radix UI Popover and Tailwind CSS — compatible with shadcn/ui theming.

v0.1.0MITReact 18 / 19Radix UITailwind CSS
bash
1
npm install date-picker-bs

Try it live

Selected: 2083 Jestha 17

DatePickerBS

A popover-based date picker with a customizable trigger button. Built on Radix UI Popover for accessibility.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { useState } from "react"
import { DatePickerBS, getTodayBs } from "date-picker-bs"
 
function App() {
  const [date, setDate] = useState(getTodayBs())
 
  return (
    <DatePickerBS
      value={date}
      onChange={setDate}
      className="w-[280px]"
    />
  )
}

CalendarBS

A standalone inline calendar component that can be embedded anywhere in your UI.

1
2
3
4
5
6
7
8
9
10
11
12
13
import { useState } from "react"
import { CalendarBS } from "date-picker-bs"
 
function App() {
  const [date, setDate] = useState()
 
  return (
    <CalendarBS
      selected={date}
      onSelect={setDate}
    />
  )
}

Nepali Language

Switch to Nepali (Devanagari) with a single prop. Month names, weekday headers, and numerals are rendered in Nepali script.

1
2
3
4
5
6
<DatePickerBS
  lang="ne"
  value={date}
  onChange={setDate}
  className="w-[280px]"
/>

Custom Formatting

Override the display format with custom patterns using YYYY, MM, DD, MMMM, etc.

1
2
3
4
5
6
7
<DatePickerBS
  value={date}
  onChange={setDate}
  formatOptions={{ pattern: "DD MMMM YYYY" }}
  placeholder="DD Month YYYY"
  className="w-[280px]"
/>

Date Constraints

Restrict the selectable range with min/max dates or disable specific days with a custom callback.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const today = getTodayBs()
 
<DatePickerBS
  value={date}
  onChange={setDate}
  minDate={today}
  maxDate={{ year: 2081, month: 6, day: 15 }}
  disabledDays={(d) => {
    // Disable weekends
    const dayIndex = (
      d.year * 365 + d.month * 30 + d.day
    ) % 7
    return dayIndex === 0 || dayIndex === 6
  }}
  className="w-[280px]"
/>

Deep Styling

Style every part of the calendar with the classNames prop or override CSS variables globally.

1
2
3
4
5
6
7
8
9
10
<CalendarBS
  selected={date}
  onSelect={setDate}
  classNames={{
    month: "text-lg font-bold",
    day: "rounded-full hover:bg-primary/10",
    today: "ring-2 ring-primary",
    selected: "bg-primary text-primary-foreground",
  }}
/>
All packagesView docs