v1.0.0 • Production Ready • MIT License

Nepali Date Picker नेपाली मिति पिकर

A beautiful, modern Bikram Sambat date picker with multiple themes, bilingual support, and accurate BS/AD conversion. Zero dependencies, lightweight, and ready for your next project.

5 Themes

0 Dependencies

30+ Years Data

~15KB Bundle Size

Get Started View on GitHub

Try It Now

Interactive

Light Mode

Dark Mode

Features

Everything You Need

Packed with all the features you need for seamless Nepali date picking in your web applications.

Lightning Fast

Instant rendering with optimized performance for smooth interactions.

5 Beautiful Themes

Default, Ocean, Forest, Sunset, and Rose themes included.

Dark Mode

Built-in dark mode with smooth transitions.

Fully Responsive

Works perfectly on all devices and screen sizes.

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.

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.

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

Quick Setup Guide

Choose your preferred installation method and get started in minutes.

index.html

<!-- 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 element -->
<div id="myDatePicker"></div>

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

<!-- 4. Initialize the date picker -->
<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>

                                    
terminal

# 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 with arrow keys.

Live Demos

See It In Action

Explore all themes, modes, and customization options with these interactive demos.

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

Customize every aspect of the date picker with these configuration 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 date 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
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 Reference

Programmatic Control

Full control over the date picker with these powerful API methods.

api-methods.js

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

// 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 Nepali font rendering.

Browser Support

Works seamlessly on all modern browsers

Chrome ✓ Latest

Firefox ✓ Latest

Safari ✓ Latest

Edge ✓ Latest

Opera ✓ Latest

IE 11 ⚠ Polyfills