Skip to content

Lightweight, Powerful JavaScript Nepali Date Picker with no dependencies.

Notifications You must be signed in to change notification settings

anuzpandey/nepali-date-picker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

43 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Nepali Date Picker

NPM Version Download Count

Lightweight, Powerful JavaScript Nepali Date Picker with no dependencies.

branding-image.png

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