Nepali Date Picker Demo

🌍 Language Support

Date picker with language options (English and Nepali):

English Date Picker:

Nepali Date Picker:

// English date picker
$('#basic-date').nepaliDatePicker({ language: 'en' });

// Nepali date picker
$('#nepali-date').nepaliDatePicker({ language: 'np' });
                

⚙️ Advanced Configuration

Date picker with custom settings and date range restrictions:

Custom Format Date:

Date Range (2080-2085):

Min Date (2080/01/01):

Max Date (2085/12/30):

// Custom format
$('#custom-date').nepaliDatePicker({
    dateFormat: "%M %d, %y",
    closeOnDateSelect: false
});

// Date range restriction
$('#range-date').nepaliDatePicker({
    yearStart: 2080,
    yearEnd: 2085
});

// Min/Max date
$('#min-date').nepaliDatePicker({
    minDate: "आइत, बैशाख १, २०८०"
});

$('#max-date').nepaliDatePicker({
    maxDate: "सोम, पौष १५, २०८५"
});
                

🎯 Event Handling

Demonstrating various events and callbacks:

Event Demo Date:

Event Log:

Ready to capture events...

// Event handling
$('#event-date').nepaliDatePicker()
    .on('dateSelect', function(e) {
        logEvent('dateSelect', e.datePickerData);
    })
    .on('dateChange', function(e) {
        logEvent('dateChange', e.datePickerData);
    })
    .on('monthChange', function(e) {
        logEvent('monthChange', e.datePickerData);
    })
    .on('yearChange', function(e) {
        logEvent('yearChange', e.datePickerData);
    })
    .on('show', function(e) {
        logEvent('show', e.datePickerData);
    });
                

🔧 Utility Functions

Demonstrating calendar utility functions:

AD Date:

BS Date:

BS Year:

BS Month:

BS Day:

Utility function output will appear here...

// Convert AD to BS
function convertAdToBs() {
    const adDate = new Date(document.getElementById('ad-date').value);
    const bsDate = calendarFunctions.getBsDateByAdDate(
        adDate.getFullYear(),
        adDate.getMonth() + 1,
        adDate.getDate()
    );
    document.getElementById('bs-date').value = 
        `${bsDate.bsYear}/${bsDate.bsMonth}/${bsDate.bsDate}`;
}

// Convert BS to AD
function convertBsToAd() {
    const bsYear = parseInt(document.getElementById('bs-year').value);
    const bsMonth = parseInt(document.getElementById('bs-month').value);
    const bsDay = parseInt(document.getElementById('bs-day').value);
    
    const adDate = calendarFunctions.getAdDateByBsDate(bsYear, bsMonth, bsDay);
    document.getElementById('ad-date').value = 
        adDate.toISOString().split('T')[0];
}
                

✨ Features Overview

🌍 Nepali Calendar Support

Full support for Bikram Sambat (BS) calendar with accurate date conversions and Nepali number display.

📱 Responsive Design

Mobile-friendly interface with touch support and responsive layout that works on all devices.

🎨 Customizable Styling

Easy to customize appearance with CSS classes and configurable themes to match your design.

⚡ Event System

Comprehensive event system for date selection, month/year changes, and picker interactions.

🔒 Date Validation

Built-in date range validation with min/max date support and year range restrictions.

🛠️ Utility Functions

Rich set of utility functions for date conversion, formatting, and calendar calculations.

🇳🇵 Nepali Date Picker Demo