Advanced Nepali Date Picker In jQuery
File Size: | 31.1 KB |
---|---|
Views Total: | 8263 |
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:
v2.1 (2021-03-29)
- UI improvements
- Better support for yyyy-mm-dd date format
2021-03-20
- v2.0
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.