AD / BS dual calendar
Toggle calendars. Select in Nepali and still store the English AD date.
Why UseMiti Date Picker
Built for Nepal-focused products
Reliable Bikram Sambat UI, accurate AD ↔ BS conversion, and adapters for the stacks you already ship.
Range & presets
Start/end selection with Last 7 days, This month, This year, and more.
One core, many UIs
@usemiti/nepali-date-picker powers React, Svelte, and jQuery.
English & Nepali UI
Month names, weekdays, and numerals in en or np.
Interactive
Live demo
Compare English UI mode with Nepali language mode for localized month and day labels.
$('#basic-date').nepaliDatePicker({ language: 'en' });
$('#nepali-date').nepaliDatePicker({ language: 'np' });
Dual calendar
AD / BS toggle — output English from Nepali selection
Enable dualCalendar: true. Set outputCalendar: 'ad' so choosing a Nepali (BS) date writes the converted Gregorian value.
Select a date to see BS ↔ AD equivalence…
$('#dual-ad-out').nepaliDatePicker({
dualCalendar: true,
outputCalendar: 'ad',
adDateFormat: '%Y-%m-%d',
dateFormat: '%y-%m-%d',
showEquivalent: true
});
Ranges
Nepali date range picker
Pick a start and end date. Use quick presets for common reporting windows.
Range details will appear here…
$('#range-bs').nepaliDatePicker({
range: true,
rangePresets: true,
dateFormat: '%y-%m-%d',
closeOnDateSelect: true
});
Advanced
Options & events
Event log
Ready…
Utilities
AD ↔ BS converter
Same conversion engine as the picker — convert Gregorian dates to Bikram Sambat and back.
Utility output…
window.nepaliDateUtils.adToBs(2024, 1, 15);
window.nepaliDateUtils.bsToAd(2080, 10, 1);
window.nepaliDateUtils.getTodayBs();
Install
npm packages
One shared core, thin UI adapters for React, Svelte, and jQuery.
@usemiti/nepali-date-picker
Core utils + CSS — SEO package name
@usemiti/date-react
React / Next.js (use client)
@usemiti/date-svelte
Svelte 5 / SvelteKit
@usemiti/date-jquery
jQuery plugin + CDN build
npm install @usemiti/nepali-date-picker
npm install @usemiti/date-react
npm install @usemiti/date-svelte
npm install @usemiti/date-jquery jquery
import { NepaliDatePicker } from '@usemiti/date-react';
import '@usemiti/date-react/styles.css';
<NepaliDatePicker language="en" onChange={(d, text) => console.log(d, text)} />
CDN
jsDelivr (jQuery)
Drop-in for static sites. Requires jQuery.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/skybaseinnovations/nepali-date-picker@main/dist/datepicker.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/skybaseinnovations/nepali-date-picker@main/dist/datepicker.min.js"></script>
<input type="text" id="nepali-date" />
<script>
$('#nepali-date').nepaliDatePicker({ dualCalendar: true, outputCalendar: 'ad' });
</script>
Guide
For developers
Looking for a Nepali date picker, Bikram Sambat calendar, or AD ↔ BS converter? UseMiti Date Picker ships a shared conversion core plus UI adapters for React / Next.js, Svelte / SvelteKit, and jQuery.
Pick your stack
@usemiti/nepali-date-picker— headless utils + CSS@usemiti/date-react— React & Next.js (use client)@usemiti/date-svelte— Svelte 5 & SvelteKit@usemiti/date-jquery— jQuery plugin & CDN
Full install guide and API notes: GitHub README.
What is Bikram Sambat?
Bikram Sambat (BS) is Nepal’s official calendar. Apps often display BS to users while storing AD in databases — a good picker handles both and the conversion between them.
Plugin options
dualCalendar— BS | AD toggleoutputCalendar—'bs'or'ad'range/rangePresets— range selectionlanguage—'en'or'np'minDate/maxDate/yearStart/yearEnd
FAQ
Frequently asked questions
What is a Nepali date picker?
A UI widget for selecting dates in Nepal’s Bikram Sambat (BS) calendar, often with conversion to Gregorian (AD) dates for databases and APIs.
Can I show the Nepali calendar but save the English AD date?
Yes. Use dualCalendar: true and outputCalendar: 'ad'.
Does it support Nepali date range selection?
Yes. Set range: true. Presets include today, last 7 days, last 30 days, this month, last month, and this year.
How do I use this with Next.js?
Install @usemiti/date-react and render the picker inside a Client Component ('use client').
Is it free for commercial projects?
Yes — MIT licensed. Part of UseMiti by Skybase Innovations.