Nepali Date Picker & Converter

✨ Key Features

🔄 Bidirectional

Convert between Nepali (BS) and English (AD) dates seamlessly

📅 Beautiful UI

Interactive calendar component with modern design

🎯 Type-Safe

Full TypeScript support with type definitions

📦 Lightweight

Core library is only 16KB, framework-agnostic

🌐 Multi-Framework

Works with React, Angular, PHP, Laravel & more

🇳🇵 Nepali Support

Nepali numerals and language support built-in

📦 Installation

NPM (React/Angular/Node.js)

npm install nepali-date-picker-converter

CDN (PHP/Vanilla JS)

<script src="https://unpkg.com/nepali-date-picker-converter@0.1.21/dist/bundle.umd.js"></script>

📅 Demo 1: Basic Date Picker

Default Theme

Selected Date:

Select a date to see the output...

🎨 Demo 2: Custom Themes

Blue Theme

Green Theme

Purple Theme

🌐 Demo 3: Multi-Language Support

English Mode

Nepali Mode

With Language Switcher

⚡ Demo 4: Two-Way Sync with AD Calendar

English Calendar (AD)

Select AD Date:

AD Date:

2024-01-21

Nepali Calendar (BS)

BS Date:

Select a date...

🎯 Demo 5: Programmatic Control

Set Date Programmatically

Enter BS Date (YYYY-MM-DD):

Current Value:

2081-10-15

🔧 Demo 6: Core Conversion Functions

AD to BS Conversion

Select AD Date:

Converted BS Date:

Click convert to see result

BS to AD Conversion

Year:

Month:

Day:

Converted AD Date:

Click convert to see result

💻 Code Examples

Vanilla JavaScript

const { mountNepaliDatePicker } = window.NepaliDatePickerConverter;

mountNepaliDatePicker('#datepicker', {
  onChange: (result) => {
    console.log('BS Date:', result.bs);        // "2081-10-07"
    console.log('AD Date:', result.ad);        // Date object
    console.log('BS Object:', result.bsDate);  // { year, month, day }
  },
  theme: { primary: '#2563eb' }
});

React

import { NepaliDatePicker } from 'nepali-date-picker-converter';

function App() {
  return (
    <NepaliDatePicker
      onChange={(result) => console.log(result)}
      theme={{ primary: '#2563eb' }}
      showLanguageSwitcher={true}
    />
  );
}

PHP Integration (Form Submission)

<form action="/save-date.php" method="POST">
  <div id="nepali-picker"></div>
  <input type="hidden" name="nepali_date" id="bs-date" />
  <button type="submit">Submit</button>
</form>

<script>
  mountNepaliDatePicker('#nepali-picker', {
    onChange: (result) => {
      if (result) {
        document.getElementById('bs-date').value = result.bs;
      }
    }
  });
</script>

Laravel Blade Component

<!-- Create component: resources/views/components/nepali-datepicker.blade.php -->
@props(['name', 'value' => ''])

<div id="picker-{{ $name }}"></div>
<input type="hidden" name="{{ $name }}" id="input-{{ $name }}" value="{{ $value }}" />

@push('scripts')
<script>
  mountNepaliDatePicker('#picker-{{ $name }}', {
    value: '{{ $value }}',
    onChange: (res) => {
      document.getElementById('input-{{ $name }}').value = res ? res.bs : '';
    }
  });
</script>
@endpush

<!-- Usage in your forms -->
<x-nepali-datepicker name="joining_date" value="2081-01-01" />

Core Functions

import { adToBs, bsToAd } from 'nepali-date-picker-converter';

// Convert AD to BS
const bsDate = adToBs(new Date(2024, 0, 21));
// { year: 2080, month: 10, day: 7 }

// Convert BS to AD
const adDate = bsToAd(2080, 10, 7);
// Date object: Sun Jan 21 2024

🐘 PHP & Laravel Integration Demo

Simulated PHP Form Submission

This demo shows how to integrate the date picker with PHP forms using a hidden input field.

📬 Simulated PHP $_POST Data:

🔧 PHP Backend Processing:

<?php
// Receive the date from form
$bsDate = $_POST['nepali_date']; // "2081-10-07"

// Parse and convert to AD using PHP class
list($y, $m, $d) = explode('-', $bsDate);
$adDate = NepaliDateConverter::bsToAd((int)$y, (int)$m, (int)$d);

// Save to database
$event = new Event();
$event->event_date = $adDate; // DateTime object
$event->save();
?>

📚 Server-Side PHP Class Example

Download NepaliDateConverter.php from the package to use these server-side conversion methods:

<?php
require_once 'NepaliDateConverter.php';

// Convert AD to BS
$bsDate = NepaliDateConverter::adToBs(new DateTime('2024-01-21'));
// Array: ['year' => 2080, 'month' => 10, 'day' => 7]

// Convert BS to AD
$adDate = NepaliDateConverter::bsToAd(2080, 10, 7);
// DateTime object: 2024-01-21

// Format BS date
$formatted = NepaliDateConverter::formatBs($bsDate, 'Y-m-d');
// String: "2080-10-07"
?>

Laravel Usage Example:

<?php
namespace App\Http\Controllers;

use App\Helpers\NepaliDateConverter;
use Illuminate\Http\Request;

class EventController extends Controller
{
    public function store(Request $request)
    {
        $bsDate = $request->input('nepali_date'); // "2081-10-07"
        
        if ($bsDate) {
            list($y, $m, $d) = explode('-', $bsDate);
            $adDate = NepaliDateConverter::bsToAd((int)$y, (int)$m, (int)$d);
            
            Event::create([
                'event_date' => $adDate,
                'event_date_bs' => $bsDate, // Optional: store both
            ]);
        }
        
        return redirect()->back()->with('success', 'Event saved!');
    }
}
?>