Advanced Nepali Date Picker In jQuery

Advanced Nepali Date Picker In jQuery
File Size: 26.7 KB
Views Total: 1275
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

An easy advanced jQuery date picker for Nepali that supports both single date selection and date range (multi-date) selection.

How to use it:

1. Load the needed stylesheet nepali-date-picker.css in the document.

<link rel="stylesheet" href="nepali-date-picker.css" />

2. Create a normal text input on the page.

<input type="text" class="date-picker" placeholder="Select Date(s)">

3. Load jQuery library and the JavaScript nepali-date-picker.js at the bottom of the page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/nepali-date-picker.js"></script>

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

$(function(){
  $('.date-picker').nepaliDatePicker();
});

5. To create a single date picker, just add the data-single="true" attribute to the input field.

<input type="text" class="date-picker" data-single="true" placeholder="Select Date(s)">

6. You can also define the initial date or date range in the value attribute as follows:

<input type="text" class="date-picker" value="2075-5-12" name="date1" />
<input type="text" class="date-picker" value="2076-12-11,2076-12-12,2076-12-13" name="date2" />

7. Show all selected dates instead of 'x dates selected' using the data-show_all_dates attribute.

<input type="text" class="date-picker" value="2076-12-11,2076-12-12,2076-12-13" name="date2" data-show_all_dates="true" />

8. Config the start/end dates.

var start_year = 2000;
var end_year = 2098;

Changelog:

2020-04-25

  • CSS update

2020-04-23

  • JS & CSS update

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