React Native Bikram Sambat Calendar, Nepali Date Picker, and AD to BS Converter

react-native-bikram-sambat is a TypeScript React Native calendar package for building Nepali calendar experiences in mobile apps. It combines a React Native Bikram Sambat calendar UI, a Nepali date picker, and reliable Nepali date conversion helpers for AD to BS conversion and BS to AD conversion.

If you need a Nepali calendar for React Native, a Bikram Sambat calendar component, or an AD to BS converter for app logic, this package gives you both the UI layer and the core date engine in one place. It is designed for teams that want production-ready Bikram Sambat and Nepali date conversion support without maintaining custom date tables and picker components themselves.

The current built-in conversion dataset supports BS years 2000 through 2100.

Features

• React Native Bikram Sambat calendar component
• Nepali date picker and range picker components
• AD to BS converter and BS to AD converter helpers
• Bikram Sambat calendar month grid generation
• Nepali date conversion utilities for formatting, parsing, validation, and arithmetic
• English and Nepali locale support
• Latin and Devanagari numeral support
• TypeScript-first exports and generated declaration files
• Theme overrides, dark mode support, and accessibility-friendly interactions

Installation

npm install react-native-bikram-sambat

or

yarn add react-native-bikram-sambat

Quick Start

import React, { useState } from 'react';
import { SafeAreaView } from 'react-native';
import {
  NepaliDatePicker,
  type BSDateValue,
} from 'react-native-bikram-sambat';

export default function App() {
  const [date, setDate] = useState<BSDateValue | null>(null);

  return (
    <SafeAreaView style={{ flex: 1, padding: 16 }}>
      <NepaliDatePicker
        value={date}
        onChange={setDate}
        placeholder="Select date"
        locale="ne"
        numerals="devanagari"
      />
    </SafeAreaView>
  );
}

AD to BS Example

Use the built-in AD to BS converter when you need to convert a Gregorian date to a Bikram Sambat date.

import { toBS } from 'react-native-bikram-sambat';

const bsDate = toBS({
  calendar: 'AD',
  year: 2024,
  month: 4,
  day: 13,
});

// Example result shape:
// { calendar: 'BS', year: 2081, month: 1, day: 1 }

BS to AD Example

Use the BS to AD converter when your app stores Bikram Sambat values and needs Gregorian output.

import { toAD } from 'react-native-bikram-sambat';

const adDate = toAD({
  calendar: 'BS',
  year: 2081,
  month: 1,
  day: 1,
});

// Example result shape:
// { calendar: 'AD', year: 2024, month: 4, day: 13 }

React Native Date Picker Example

import React, { useState } from 'react';
import { SafeAreaView } from 'react-native';
import {
  NepaliDatePicker,
  type BSDateValue,
} from 'react-native-bikram-sambat';

export default function App() {
  const [selectedDate, setSelectedDate] = useState<BSDateValue | null>(null);

  return (
    <SafeAreaView style={{ flex: 1, padding: 16 }}>
      <NepaliDatePicker
        value={selectedDate}
        onChange={setSelectedDate}
        placeholder="Choose a BS date"
        displayFormat="yyyy-MM-dd"
        locale="en"
        numerals="latin"
      />
    </SafeAreaView>
  );
}

More Usage Examples

Inline Bikram Sambat calendar

import React, { useState } from 'react';
import { SafeAreaView } from 'react-native';
import {
  NepaliCalendar,
  type BSDateValue,
} from 'react-native-bikram-sambat';

export default function App() {
  const [date, setDate] = useState<BSDateValue | null>(null);

  return (
    <SafeAreaView style={{ flex: 1, padding: 16 }}>
      <NepaliCalendar
        value={date}
        onChange={setDate}
        locale="ne"
        numerals="devanagari"
      />
    </SafeAreaView>
  );
}

Nepali date range picker

import React, { useState } from 'react';
import { SafeAreaView } from 'react-native';
import {
  NepaliRangePicker,
  type DateRangeValue,
} from 'react-native-bikram-sambat';

export default function App() {
  const [range, setRange] = useState<DateRangeValue>({
    start: null,
    end: null,
  });

  return (
    <SafeAreaView style={{ flex: 1, padding: 16 }}>
      <NepaliRangePicker
        value={range}
        onChange={setRange}
        placeholder="Select date range"
      />
    </SafeAreaView>
  );
}

Formatting and parsing Nepali dates

import {
  formatBS,
  parseBS,
  toNepaliNumerals,
  toLatinNumerals,
} from 'react-native-bikram-sambat';

const date = { calendar: 'BS', year: 2081, month: 1, day: 5 } as const;

const isoLike = formatBS(date, 'yyyy-MM-dd');
const nepaliFormatted = formatBS(date, 'dd MMMM yyyy', {
  locale: 'ne',
  numerals: 'devanagari',
});

const parsed = parseBS('2081-01-05', 'yyyy-MM-dd');
const devanagari = toNepaliNumerals('2081');
const latin = toLatinNumerals('२०८१');

API Reference

Components

• NepaliCalendar: Inline Bikram Sambat calendar component for React Native
• NepaliDatePicker: Pressable Nepali date picker input with modal calendar
• DatePickerModal: Controlled date picker modal component
• NepaliRangePicker: Range picker input for selecting start and end BS dates
• RangePickerModal: Controlled range picker modal component

Conversion and formatting

• toBS: Convert an AD date to a BS date
• toAD: Convert a BS date to an AD date
• formatBS: Format a BS date using supported tokens
• parseBS: Parse a BS date string using the supported yyyy-MM-dd pattern
• toNepaliNumerals: Convert Latin digits to Devanagari digits
• toLatinNumerals: Convert Devanagari digits to Latin digits

Validation and helpers

• isValidBSDate
• isValidADDate
• isBSDateInSupportedRange
• getSupportedBSRange
• createBSDateKey
• parseBSDateKey
• compareBS
• addBSDays
• subBSDays
• todayBS
• getCalendarMonthGrid

Use Cases

• Building a Nepali date picker in a React Native checkout, booking, or profile flow
• Showing a Bikram Sambat calendar in education, finance, HR, government, or scheduling apps
• Converting user-entered Gregorian dates with an AD to BS converter
• Converting stored BS values to Gregorian dates with a BS to AD converter
• Supporting Nepali date conversion and display in apps for users in Nepal
• Adding a TypeScript React Native calendar package to an Expo or React Native CLI codebase

Why Use This Package?

• It gives you a single package for both Nepali date conversion and React Native UI components.
• It reduces maintenance compared with rolling your own Bikram Sambat calendar logic.
• It keeps TypeScript types close to the public API for better editor support and safer integration.
• It supports theming, locales, numerals, and accessibility so teams can ship a more polished Nepali calendar for React Native.

TypeScript Support

This package is built with TypeScript and publishes declaration files via the types field. Public types include BSDateValue, ADDateValue, DateRangeValue, NepaliCalendarProps, NepaliDatePickerProps, RangePickerModalProps, and theme-related types.

Expo and React Native CLI Compatibility

This package currently appears suitable for both Expo-managed and React Native CLI projects because the published source is JavaScript and TypeScript only and does not define custom native modules. You should still test your target screens in your own app, especially if you rely on specific React Native versions, theming constraints, or accessibility requirements.

Preview

Contributing

Contributions are welcome. Please open an issue for bugs, feature requests, or API discussions before large changes, and see CONTRIBUTING.md for local setup and contribution guidance.

License

MIT. See LICENSE.