Nepali Date Picker

Lightweight, Powerful JavaScript Nepali Date Picker with no dependencies.

INSTALLATION

1. Install via NPM

npm install @anuz-pandey/nepali-date-picker
# Or Yarn
yarn add @anuz-pandey/nepali-date-picker
# Or Pnpm
pnpm add @anuz-pandey/nepali-date-picker
# Or Bun
bun add @anuz-pandey/nepali-date-picker

2. Installation for Non-Module Environments

• 2.1. Download the latest release Download and extract the zip file and copy the files from dist folder to your project.

• 2.2. Use a standalone build

  <!-- Add to the end of body section -->
  <script src="dist/nepali-date-picker.bundle.js"></script>

OR

3. Use separate files (JS and CSS)

<!-- Add to the head section -->
<link rel="stylesheet" href="dist/nepali-date-picker.min.css">

<!-- Add to the end of body section -->
<script src="dist/nepali-date-picker.min.js"></script>

4. CDN

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

<!-- OR -->
<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>

USAGE

If you’re using a bundler, e.g. webpack, you’ll need to import NepaliDatePicker and the CSS file.

// esp. modules are recommended, if available, especially for typescript
import NepaliDatePicker from '@anuz-pandey/nepali-date-picker'

// CommonJS
const NepaliDatePicker = require('@anuz-pandey/nepali-date-picker')

All the following are valid ways to create flatpickr instance.

// Initialize Nepali Date Picker
new NepaliDatePicker('.date-picker')
// --- OR ---
new NepaliDatePicker('#date-of-birth')
// --- OR ---
new NepaliDatePicker('selector', config) // See Config Options below

Config Options

let config = {
    format: 'YYYY-MM-DD',           // 'YYYY-MM-DD', 'YYYY/MM/DD', 'YYYY.MM.DD', 'DD-MM-YYYY', 'DD/MM/YYYY', 'DD.MM.YYYY'  
    disableAfterToday: false,       // boolean: true | false
    disableBeforeToday: false,      // boolean: true | false
    disableToday: false,            // boolean: true | false
    closeOnDateSelect: true,        // boolean: true | false
    markHolidays: true,             // boolean: true | false
    holidays: ['Saturday'],         // ['Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
    indicateCurrentDate: true,      // boolean: true | false
    setCurrentDate: false,          // boolean: true | false
    position: 'left',               // 'left', 'right' or 'center'
    daysFormat: 'dd',               // 'ddd' for full day name, 'dd' for short day name, 'd' for 1 letter day name
    locale: 'np',                   // 'np' for nepali, 'en' for english
    theme: 'flat',                  // bordered | soft | flat
    darkMode: false,                // boolean: true | false
    inline: false,                  // boolean: true | false
}

English Date to Nepali Date Conversion

// To Convert English Date to Nepali Date
let NepaliDatePicker = new NepaliDatePicker();
NepaliDatePicker.convertToNepaliDate(1996, 4, 22)
// Result: {year: 2053, month: 1, day: 10}

Features

| Feature | Status | |---------------------------------------------------------|--------------| | Proper UI for Date Picker | ✅ Done | | Convert English Date to Nepali Date | ✅ Done | | Convert Nepali Date to English Date | ⬜ Not Done | | Add Date Picker to Multiple Input Fields | ✅ Done | | Remove jQuery Dependency | ✅ Done | | Support Time Select | ⬜ Not Done | | Calculate Age on Date | ⬜ Not Done | | Inline Calendar | ✅ Done | | Add Configurations to Date Picker | ⬜ Not Done | | Close/Hide Date Picker on Date Select | ✅ Done | | ------------------------------------------------------- | ------------ | | Disable on Today's Date | ✅ Done | | Disable on Before Today's Date | ✅ Done | | Disable on Before After Today's Date | ✅ Done | | Disable on Specific Dates | ⬜ Not Done | | Disable on Specific Days | ⬜ Not Done | | Disable on Specific Months | ⬜ Not Done | | Disable on Specific Years | ⬜ Not Done | | ------------------------------------------------------- | ------------ | | Mark Holidays on Specific Days | ✅ Done | | Mark Holidays on Specific Dates | ⬜ Not Done | | Mark Holidays on Date Ranges | ⬜ Not Done | | ------------------------------------------------------- | ------------ | | Set Current Date Indicator | ✅ Done | | Set Current Date on Input Value | ✅ Done | | ------------------------------------------------------- | ------------ | | Set Date Format - YYYY-MM-DD | ✅ Done | | Set Date Format - YYYY/MM/DD | ✅ Done | | Set Date Format - YYYY.MM.DD | ✅ Done | | Set Date Format - DD-MM-YYYY | ✅ Done | | Set Date Format - DD/MM/YYYY | ✅ Done | | Set Date Format - DD.MM.YYYY | ✅ Done | | ------------------------------------------------------- | ------------ | | Picker Position - Left | ✅ Done | | Picker Position - Center | ✅ Done | | Picker Position - Right | ✅ Done | | ------------------------------------------------------- | ------------ | | Days Format - Full Name (ddd) [Eg. Sunday, आइतबार] | ✅ Done | | Days Format - Short Name (dd) [Eg. Sun, आइत] | ✅ Done | | Days Format - Very Short Name (d) [Eg. S, आ] | ✅ Done | | ------------------------------------------------------- | ------------ | | English Language Support | ✅ Done | | Nepali Language Support | ✅ Done | | ------------------------------------------------------- | ------------ | | Dark Theme | ✅ Done | | ------------------------------------------------------- | ------------ | | Min Date | ⬜ Not Done | | Max Date | ⬜ Not Done |