Customizable Nepali Date Picker Plugin

A customizable, easy-to-use, input-based date picker plugin based on the Nepali calendar.

Users can select a Nepali date in a navigatable month view and change month & year from dropdowns at the top of the Nepali calendar.

It also provides useful API methods to quickly convert Nepali date to Gregorian date and vice versa.

How to use it:

1. Install & Download with NPM.

# NPM
$ npm i nepali-date-picker --save

2. Insert the Nepali Date Picker's JavaScript and CSS files into the HTML page.

<!-- Required -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- From Local -->
<link rel="stylesheet" href="./dist/nepaliDatePicker.min.css" />
<script src="./dist/jquery.nepaliDatePicker.min.js"></script>
<!-- Or From A CDN -->
<link rel="stylesheet" href="https://unpkg.com/nepali-date-picker@latest/dist/nepaliDatePicker.min.css" />
<script src="https://unpkg.com/nepali-date-picker@latest/dist/jquery.nepaliDatePicker.min.js"></script>

3. Create an input field for the Nepali Date Picker.

<input type="text" value="" name="date" class="example" />

4. Attach the Nepali Date Picker to the input field. That's it.

$(".example").nepaliDatePicker({
  // options here
});

5. Customize the date format.

• %d: Date, १, १२, ...
• %D: Names of the days of the week, आईत, सोम, ...
• %m: Nepali month, १, ५, ...
• %M: Month name, बैशाख, जेठ, असार, ...
• %y: Year, २०७४, ...

$(".example").nepaliDatePicker({
  dateFormat: "%D, %M %d, %y"
});

6. Determine whether to auto dismiss the Nepali calendar after a date is selected. Default: true.

$(".example").nepaliDatePicker({
  closeOnDateSelect: false
});

7. Set the min/max dates.

$(".example").nepaliDatePicker({
  minDate: 'सोम, जेठ १०, २०७३',
  maxDate: 'मंगल, जेठ ३२, २०७३'
});

8. Set the start/end years.

$(".example").nepaliDatePicker({
  yearStart: 1970,
  yearEnd: 2100
});

9. API methods.

$(".example").nepaliDatePicker({
  yearStart: 1970,
  yearEnd: 2100
});

10. Event handlers.

$("#example").on("show", function (event) {
  // do something
});

$("#example").on("yearChange", function (event) {
  // do something
});

$("#example").on("monthChange", function (event) {
  // do something
});

$("#example").on("dateChange", function (event) {
  // do something
});

$("#example").on("dateSelect", function (event) {
  // do something
});

Changelog:

2020-08-13

• v2.0.1

---

This awesome jQuery plugin is developed by leapfrogtechnology. For more Advanced Usages, please check the demo page or visit the official website.