Nepali Date Picker

Lightweight, powerful JavaScript Nepali date picker with zero dependencies.

✨ Features

• 🎯 Single & Multiple Selection - Basic and multiple date modes
• 🌍 Bilingual - English & Nepali support
• 🎨 Themeable - 3 themes + dark mode
• 📅 Smart Constraints - Min/max dates, disable specific dates
• 🪂 Lightweight - ~26KB minified (JS only)
• 🚫 No Dependencies - Zero external libraries
• ⚡ Framework Compatible - Vue, React, Angular, Alpine, Livewire
• 🔊 DOM Events - Native input, change, and custom events
• 📱 Responsive - Works on all devices

🚀 Quick Start

Installation

npm install @anuz-pandey/nepali-date-picker

Basic Usage

<div style="position: relative;">
  <input type="text" id="date-picker">
</div>

<script src="path/to/nepali-date-picker.bundle.js"></script>
<script>
  new NepaliDatePicker('#date-picker');
</script>

With Configuration

new NepaliDatePicker('#date-picker', {
  format: 'YYYY-MM-DD',
  mode: 'basic',              // or 'multiple'
  locale: 'np',               // or 'en'
  theme: 'flat',              // or 'soft', 'bordered'
  darkMode: false,
  minDate: '2082-01-01',
  maxDate: '2082-12-31'
});

Listen to Events

document.getElementById('date-picker').addEventListener('nepali-date-change', (e) => {
  console.log('Selected date:', e.detail.date);
  console.log('Parsed date:', e.detail.dateObject);
});

📚 Documentation

Full documentation is available in the /docs folder:

Document	Purpose
📖 Quick Start	Get started in 5 minutes
💾 Installation	NPM, CDN, and standalone options
🔧 API Reference	All configuration options and methods
📝 Examples	Code samples for common use cases
🗺️ Features	Complete feature roadmap
🤝 Contributing	Report bugs and request features

🎯 Common Use Cases

Multiple Date Selection

new NepaliDatePicker('#date-picker', {
  mode: 'multiple',
  selectedDatesFormat: 'comma'
});

Date Range (Min/Max)

new NepaliDatePicker('#date-picker', {
  minDate: '2082-01-01',
  maxDate: '2082-12-31'
});

Disable Specific Dates

new NepaliDatePicker('#date-picker', {
  disableDates: ['2082-01-26', '2082-02-19'],
  disableBeforeToday: true
});

Framework Integration

Works seamlessly with Vue, React, Angular, Alpine.js, Livewire, and more. See documentation for framework-specific examples.

📦 Installation Methods

NPM / Yarn / Pnpm / Bun

npm install @anuz-pandey/nepali-date-picker
# or
yarn add @anuz-pandey/nepali-date-picker

CDN

<script src="https://cdn.jsdelivr.net/npm/@anuz-pandey/nepali-date-picker/dist/nepali-date-picker.bundle.min.js"></script>

<!-- OR separate files -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@anuz-pandey/nepali-date-picker/dist/nepali-date-picker.min.css">
<script src="https://cdn.jsdelivr.net/npm/@anuz-pandey/nepali-date-picker/dist/nepali-date-picker.min.js"></script>

Standalone Files

Download the latest release and extract:

<link rel="stylesheet" href="dist/nepali-date-picker.min.css">
<script src="dist/nepali-date-picker.bundle.js"></script>

🤝 Contributing

We welcome your feedback!

1. Report bugs - Open an issue
2. Request features - Describe your idea in an issue
3. Ask questions - Use GitHub Discussions

See CONTRIBUTING.md for more information.

📄 License

MIT License - feel free to use in your projects

🙌 Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Documentation: Full Docs

---

Made with ❤️ by Anuz Pandey