Nepali Multi Select Date Picker

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.

- Sanil Shakya

Examples


Single Date Selection

Multiple Locale

Multiple Date Selection

From / To Date Limits


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