What is Nepali Date Picker?

Nepali Date Picker is a free, open-source JavaScript library for adding Bikram Sambat (BS) calendar functionality to web applications. It supports multiple themes, bilingual display, and accurate BS/AD date conversion.

Who developed Nepali Date Picker?

Nepali Date Picker was developed by Om Pandey, a Full Stack Developer from Kathmandu, Nepal with 5+ years of experience in web development.

Is Nepali Date Picker free to use?

Yes, Nepali Date Picker is completely free and open-source under the MIT license. You can use it in personal and commercial projects.

What date range does Nepali Date Picker support?

Nepali Date Picker includes accurate BS calendar data from 2070 BS to 2099 BS, covering approximately 30 years of date conversion support.

Does Nepali Date Picker require jQuery?

No, Nepali Date Picker is built with vanilla JavaScript and has zero dependencies. It works without jQuery or any other library.

v1.0.0 MIT CDN Production Ready

नेपाली मिति पिकर

Name: Nepali Date Picker
Availability: InStock
Author: Om Pandey

A beautiful, modern Nepali (Bikram Sambat) date picker with multiple themes, bilingual support, and complete BS/AD conversion. Zero dependencies, lightweight, and ready for production.

Get Started View on GitHub

Try It Now

Light Theme

Dark Theme

Features

Everything you need for Nepali date picking

Design & Themes

Lightning Fast

Instant rendering with optimized performance

5 Beautiful Themes

Default, Ocean, Forest, Sunset, and Rose

Dark Mode

Built-in dark mode support with smooth transitions

Fully Responsive

Works perfectly on all devices and screen sizes

Localization

Bilingual Support

Nepali, English, or both languages together

BS ⇔ AD Conversion

Accurate conversion from 2070 to 2099 BS

Nepali Numerals

Full Devanagari number support (०-९)

Month & Year Picker

Quick navigation with grid selectors

Technical

Zero Dependencies

Pure vanilla JavaScript, no jQuery needed

Lightweight

Minimal bundle size for fast loading

Easy Integration

Simple API with intuitive methods

CDN Ready

Use instantly via jsDelivr CDN

User Experience

Smart Positioning

Auto-adjusts to viewport boundaries

Keyboard Friendly

Full keyboard navigation support

Accessible

ARIA compliant for screen readers

Customizable

Extensive options and callbacks

Installation

Choose your preferred installation method

index.html (CDN)

<!-- 1. Include CSS from CDN -->
<link rel="stylesheet" 
      href="https://cdn.jsdelivr.net/gh/ompandey07/nepali-datepicker@main/dist/nepali-datepicker.css">

<!-- 2. Add container -->
<div id="myDatePicker"></div>

<!-- 3. Include JS from CDN -->
<script src="https://cdn.jsdelivr.net/gh/ompandey07/nepali-datepicker@main/dist/nepali-datepicker.js"></script>

<!-- 4. Initialize -->
<script>
  NepaliDatePicker.init('#myDatePicker', {
    mode: 'bilingual',
    theme: 'default',
    onChange: function(date) {
      console.log('Selected:', date);
    }
  });
</script>

index.html (Local Files)

<!-- 1. Download files from GitHub and include CSS -->
<link rel="stylesheet" href="dist/nepali-datepicker.css">

<!-- 2. Add container -->
<div id="datepicker"></div>

<!-- 3. Include JS -->
<script src="dist/nepali-datepicker.js"></script>

<!-- 4. Initialize -->
<script>
  NepaliDatePicker.init('#datepicker', {
    mode: 'bilingual',
    theme: 'ocean'
  });
</script>

                                
npm (Coming Soon)

# npm package coming soon!
npm install nepali-datepicker

# For now, please use CDN or download files from GitHub
# https://github.com/ompandey07/nepali-datepicker

Pro Tip

Click on the month/year in the header to quickly jump to any month or year! The date picker also supports full keyboard navigation.

Live Demos

Explore all themes and modes

Display Modes

Bilingual (Both)

Nepali Only

English Only

Dark Mode

Dark Bilingual

Dark Nepali

Dark English

Color Themes

Ocean Theme

Forest Theme

Sunset Theme

Rose Theme

Configuration

All available options

Option	Type	Default	Description
mode	String	'bilingual'	'bilingual', 'nepali', or 'english'
theme	String	'default'	'default', 'ocean', 'forest', 'sunset', 'rose'
dark	Boolean	false	Enable dark mode
minYear	Number	2070	Minimum BS year
maxYear	Number	2099	Maximum BS year
closeOnSelect	Boolean	true	Close after selection
showToday	Boolean	true	Show Today button
showClear	Boolean	true	Show Clear button
showClose	Boolean	true	Show Close button
showDisplay	Boolean	true	Show selected date display below
placeholder	String	'मिति छान्नुहोस्'	Input placeholder (Nepali)
placeholderEn	String	'Select Date'	Input placeholder (English)
onChange	Function	null	Callback on date select
onOpen	Function	null	Callback on calendar open
onClose	Function	null	Callback on calendar close

API Methods

Programmatic control

api.js

// Initialize
const picker = NepaliDatePicker.init('#picker', opts);

// Get selected date
picker.getDate();  // Returns: { bs: {...}, ad: {...}, formatted: '...' }

// Set date programmatically
picker.setDate(2081, 5, 15);

// Open / Close / Toggle calendar
picker.open();
picker.close();
picker.toggle();

// Clear selection
picker.clear();

// Change theme dynamically
picker.setTheme('ocean');
picker.setDark(true);

// Destroy instance
picker.destroy();

// ========== Utility Functions ==========

// Convert BS to AD
NepaliDatePicker.utils.bsToAd(2081, 5, 15);
// Returns: { year: 2024, month: 8, day: 30, dow: 5 }

// Convert AD to BS
NepaliDatePicker.utils.adToBs(2024, 8, 30);
// Returns: { year: 2081, month: 5, day: 15 }

// Convert to Nepali numerals
NepaliDatePicker.utils.toNepali(2081);  // Returns: '२०८१'

// Get today's BS date
NepaliDatePicker.utils.getToday();
// Returns: { year: 2081, month: 5, day: 15 }

Calendar Data Range

Accurate BS data included from 2070 to 2099. Dates outside this range may not convert correctly. The date picker uses Google Fonts (Noto Sans Devanagari) - ensure internet connectivity for proper font rendering.

Browser Support

Works on all modern browsers

Chrome ✓ Latest

Firefox ✓ Latest

Safari ✓ Latest

Edge ✓ Latest

Opera ✓ Latest

IE 11 ⚠ Polyfills