A simple yet powerful jQuery Nepali Date Picker. Supports both single and multiple date selection in
dual language.
Multiple date selection can be done by pressing Shift or Control / Command key.
Include these files
<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link href="/path/to/nepali-date-picker.css" rel="stylesheet">
<script src="/path/to/nepali-date-picker.js"></script>
Create an HTML input field and initialize with $.fn.nepaliDatePicker method.
<input type="text" class="datepicker" />
$('.datepicker').nepaliDatePicker();
By default it is in multiple date selection mode. If you want to use single date selection mode then
just add data-single="true"
in your markup. [Example 1.1 and 1.2]
<input class="datepicker" data-single="true">
By default calendar will show in Nepali lanauge. To show in English language just add
data-locale="en"
into your markup. [Example 2.1 and 2.2]
<input class="datepicker" data-locale="np">
By default calendar will show all the dates from Nepali calendar. If you want to restrict date just
pass data-date_after
and data-date_before
in your markup. [Example 4.1 and
4.2]
<input class="datepicker" data-locale="np">
All the options available as data-*
can also be passed as plugin properties
$('.datepicker').nepaliDatePicker({
locale: 'np', // en or np
single: false, // true (default) for multi date picker
show_all_dates: false, // true for showing all selected dates as input field value
date_before: '', // dates before this date will be disabled
date_after: '', // dates after this date will be disabled
});
In multiple date selection mode, selected date can be displayed in 3 different ways.
data-show_all_dates="true"
in input
field.
[Example 3.3]
<div>
instead of <input>
.
[Example 3.4]<input class="datepicker" data-show_all_dates="true">
Some additional feature which may improve the user experiences.
npm i nepali-multi-date-picker
Sanil Shakya - (https://www.sanil.com.np)
This plugin is free to use in any commercial or personal project. Check license here : LICENSE.md