@rato-guras-technology/nepali-date-picker NPM

Nepali Date Picker

npm.io

A lightweight, customizable Nepali (Bikram Sambat) date picker for modern web applications. This package provides an intuitive interface for selecting dates in the Nepali calendar system while supporting seamless conversion between Gregorian and Nepali dates.

Features

📅 Full Nepali Bikram Sambat calendar support (2000 BS - 2090 BS)
🔄 Automatic conversion between Gregorian and Nepali dates
🌐 Bilingual support (Nepali and English languages)
🎨 Customizable themes (light/dark) and primary colors
📱 Fully responsive and mobile-friendly design
🔍 Date range validation and constraints
🌙 Dark mode support with automatic system preference detection
⌨️ Keyboard navigation for improved accessibility
♿ WCAG compliant for better accessibility
📦 Lightweight (~50KB gzipped)
🚀 Zero dependencies
🔧 Easy integration with any JavaScript framework

Installation

Using CDN

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/@rato-guras-technology/nepali-date-picker/dist/styles.css"><!-- JavaScript -->
<script src="https://unpkg.com/@rato-guras-technology/nepali-date-picker/dist/index.umd.js"></script>

Basic Usage

HTML Setup

<input id="nepali-date" type="text" readonly placeholder="Select date">

JavaScript Initialization

// If using npm
import { NepaliDatePicker } from '@rato-guras-technology/nepali-date-picker';
import '@rato-guras-technology/nepali-date-picker/dist/styles.css';

// If using CDN
const NepaliDatePicker = window.NepaliDatePicker;

// Initialize
const datePicker = new NepaliDatePicker('#nepali-date', {
  onDateSelect: (date) => {
    console.log('Selected date:', date);
  }
});

Configuration Options

Option	Type	Default	Description
`theme`	string	`'light'`	Color theme (`'light'` or `'dark'`)
`language`	string	`'ne'`	Language (`'ne'` for Nepali, `'en'` for English)
`primaryColor`	string	`'#4F46E5'`	Primary color for UI elements (any valid CSS color)
`showTodayButton`	boolean	`true`	Whether to show the "Today" button
`closeOnSelect`	boolean	`true`	Close picker after selecting a date
`disableFutureDates`	boolean	`false`	Disable dates after today
`disablePastDates`	boolean	`false`	Disable dates before today
`minDate`	object	`null`	Minimum selectable date (`{ year, month, day }`)
`maxDate`	object	`null`	Maximum selectable date (`{ year, month, day }`)
`initialDate`	object	`null`	Initial date to display (`{ year, month, day }`)
`dateFormat`	string	`'YYYY-MM-DD'`	Format for displayed date (supports `YYYY`, `MM`, `DD`)
`onDateSelect`	function	`null`	Callback when date is selected

Methods

Method	Description
`getDate()`	Returns currently selected date as `{ year, month, day }`
`setDate(date)`	Programmatically set date (`date` as `{ year, month, day }`)
`setOptions(options)`	Update configuration options dynamically
`show()`	Show the date picker
`hide()`	Hide the date picker
`destroy()`	Clean up and remove the date picker instance

Advanced Usage

Form Integration

<form id="my-form">
  <label for="event-date">Event Date:</label
  ><input id="event-date" type="text" readonly /><input
    type="hidden"
    id="event-date-value"
    name="eventDate"
  /><button type="submit">Submit</button>
</form>
<script>
  const formDatePicker = new NepaliDatePicker('#event-date', {
    onDateSelect: (date) => {
      document.getElementById('event-date-value').value =
        `${date.year}-${date.month + 1}-${date.day}`;
    }
  });

  document.getElementById('my-form').addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    console.log('Form submitted with:', Object.fromEntries(formData.entries()));
  });
</script>

Date Range Selection

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px">
  <div>
    <label for="start-date">Start Date:</label
    ><input id="start-date" type="text" readonly />
  </div>
  <div>
    <label for="end-date">End Date:</label
    ><input id="end-date" type="text" readonly />
  </div>
</div>
<script>
  const startPicker = new NepaliDatePicker('#start-date');
  const endPicker = new NepaliDatePicker('#end-date', {
    minDate: startPicker.getDate()
  });

  startPicker.setOptions({
    onDateSelect: (date) => {
      endPicker.setOptions({ minDate: date });
    }
  });
</script>

Dynamic Configuration

const picker = new NepaliDatePicker('#dynamic-picker');

// Change theme
document.getElementById('dark-mode-btn').addEventListener('click', () => {
  picker.setOptions({ theme: 'dark' });
});

// Change language
document.getElementById('english-btn').addEventListener('click', () => {
  picker.setOptions({ language: 'en' });
});

// Change color
document.getElementById('color-btn').addEventListener('click', () => {
  picker.setOptions({ primaryColor: '#F43F5E' }); // Rose color
});

Styling

You can override the default styles with your own CSS. The date picker uses the following CSS classes:

.ndp - Main container
.ndp-header - Header section (month/year navigation)
.ndp-body - Calendar grid
.ndp-day - Individual day cell
.ndp-day.selected - Selected day
.ndp-day.today - Current day
.ndp-day.disabled - Disabled day
.ndp-footer - Footer section (today button)

Example custom styling:

/* Change selected day style */
.ndp-day.selected {
  background-color: #4F46E5;
  color: white;
}

/* Change today's date style */
.ndp-day.today {
  border: 2px solid #4F46E5;
}

/* Change header background */
.ndp-header {
  background-color: #4F46E5;
  color: white;
}