@anuz-pandey/nepali-date-picker
v2.2.1
Published
Lightweight, Powerful JavaScript Nepali Date Picker with no dependencies.
Downloads
33
Maintainers
Readme
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 |