Nepali Multi Select Date Picker

Examples

---

Single Date Selection

Example 1.1

Example 1.2

Multiple Locale

Example 2.1

Example 2.2

Multiple Date Selection

Example 3.1

Example 3.2

Example 3.3

Example 3.4

From / To Date Limits

Example 4.1

Example 4.2

Getting Started

---

Installing

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>

Usage

Create an HTML input field and initialize with $.fn.nepaliDatePicker method.

<input type="text" class="datepicker"  />
$('.datepicker').nepaliDatePicker();

Single or Multiple Selection Mode

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">

Nepali or English Language

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">

Restrict Date Selection

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">

Pass data as plugin properties

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
});

Options

In multiple date selection mode, selected date can be displayed in 3 different ways.

• If only 1 date is selected, it will show selected date as value in input field. [Example 3.1 and 3.2]
• If more than 1 date are selected, it will show the total number of dates selected as value. [Example 3.1 and 3.2]
• To show all dates as input value, use data-show_all_dates="true" in input field. [Example 3.3]
• To show dates as tags, use <div> instead of <input>. [Example 3.4]
• In all cases, actual dates are sent as hidden input fields.

<input class="datepicker" data-show_all_dates="true">

Hidden Features

Some additional feature which may improve the user experiences.

• When calendar is open, press left or right arrow to switch to next months

Download

• Install via NPM
  

  npm i nepali-multi-date-picker

• Download this plugin from GitHub.com

Plugin Authors

Sanil Shakya - (https://www.sanil.com.np)

License

This plugin is free to use in any commercial or personal project. Check license here : LICENSE.md