date-picker-bs

1
npm install date-picker-bs

1
pnpm add date-picker-bs

1
yarn add date-picker-bs

1
npx shadcn@latest add https://date-picker-bs.vercel.app/r/date-picker-bs.json

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]"
    />
  )
}

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}
    />
  )
}

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

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

1
2
3
4
<CalendarBS
  defaultMonth={{ year: 2080, month: 10 }}
  onMonthChange={(m) => console.log("Month changed:", m)}
/>

1
2
3
4
5
6
7
8
const [open, setOpen] = useState(false)
 
<DatePickerBS
  value={date}
  onChange={setDate}
  open={open}
  onOpenChange={setOpen}
/>

1
2
3
4
5
6
<DatePickerBS
  value={getTodayBs()}
  onChange={() => {}}
  disabled
  className="w-[280px]"
/>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// ISO-like, numeric
formatOptions={{ pattern: "YYYY-MM-DD" }}
// → "2081-05-15"
 
// Full month name
formatOptions={{ pattern: "YYYY MMMM DD" }}
// → "२०८१ भदौ १५" (Nepali)
 
// Day first
formatOptions={{ pattern: "DD MMMM YYYY" }}
// → "15 Bhadra 2081" (English)
 
// Month day, year
formatOptions={{ pattern: "MMMM DD, YYYY" }}
// → "Bhadra 15, 2081"
 
// Abbreviated
formatOptions={{ pattern: "YYYY MMM DD" }}
// → "2081 Bhad 15"

1
2
3
4
import { toNepaliNumber, parseNepaliNumber } from "date-picker-bs"
 
toNepaliNumber(2081)     // → "२०८१"
parseNepaliNumber("२०८१") // → 2081

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const today = getTodayBs()
const nextWeek = {
  year: today.year,
  month: today.month,
  day: today.day + 7,
}
 
<DatePickerBS
  value={date}
  onChange={setDate}
  minDate={today}
  maxDate={nextWeek}
  className="w-[280px]"
/>

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

1
<DatePickerBS value={date} onChange={setDate} className="w-[280px] h-10 text-sm" />

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",
  }}
/>

1
2
3
4
5
6
7
8
9
10
11
12
13
/* Your global CSS */
:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 4%;
  --card: 0 0% 100%;
  --popover: 0 0% 100%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 96%;
  --muted-foreground: 0 0% 46%;
  --border: 0 0% 90%;
  --radius: 0.5rem;
}

1
2
3
4
5
type DateBS = {
  year: number   // BS year (e.g. 2081)
  month: number  // 1-indexed month (1 = Baisakh)
  day: number    // Day of month (1-32)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
interface CalendarBSClassNames {
  caption: string
  captionLabel: string
  nav: string
  navButton: string
  navButtonPrev: string
  navButtonNext: string
  table: string
  headRow: string
  headCell: string
  row: string
  cell: string
  day: string
  daySelected: string
  dayToday: string
  dayOutside: string
  dayDisabled: string
  yearGrid: string
  yearCell: string
  yearButton: string
  yearSelected: string
  yearToday: string
  yearDisabled: string
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import {
  // Components
  DatePickerBS,
  CalendarBS,
 
  // Types
  type DateBS,
  type BsLang,
  type BsFormatOptions,
  type CalendarDay,
  type CalendarBSClassNames,
  type CalendarBSProps,
  type DatePickerBSProps,
  type DatePickerMode,
 
  // Constants
  MONTHS,
  WEEKDAYS,
 
  // Utilities
  getTodayBs,
  formatBsDate,
  bsToAd,
  adToBs,
  getBsDayOfWeek,
  getDaysInBsMonth,
  getDaysInBsYear,
  getPrevMonth,
  getNextMonth,
  generateCalendarGrid,
  isSameBsDate,
  isBeforeBsDate,
  isAfterBsDate,
  isValidBsYear,
  getBsYearRange,
  toNepaliNumber,
  parseNepaliNumber,
} from "date-picker-bs"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import {
  getTodayBs,
  formatBsDate,
  bsToAd,
  adToBs,
  toNepaliNumber,
  isSameBsDate,
  isBeforeBsDate,
  generateCalendarGrid,
} from "date-picker-bs"
 
// Get today
const today = getTodayBs()
// → { year: 2081, month: 5, day: 15 }
 
// Format
formatBsDate(today, "en", { pattern: "YYYY MMMM DD" })
// → "2081 Bhadra 15"
 
formatBsDate(today, "ne", { pattern: "YYYY MMMM DD" })
// → "२०८१ भदौ १५"
 
// Convert BS → AD
const adDate = bsToAd(today.year, today.month, today.day)
// → Date object
 
// Convert AD → BS
const bsDate = adToBs(new Date())
// → DateBS object
 
// Compare dates
isSameBsDate(today, { year: 2081, month: 5, day: 15 })  // → true
isBeforeBsDate({ year: 2080, month: 12, day: 30 }, today) // → true
 
// Nepali numerals
toNepaliNumber(2081)      // → "२०८१"
parseNepaliNumber("२०८१") // → 2081
 
// Calendar grid
const weeks = generateCalendarGrid(2081, 5)
// → CalendarDay[][] — ready for rendering