nepali-multi-date-picker
Version:
A simple yet powerful jquery date picker based in Nepali calendar. Supports both single and multiple date selections in dual language.
243 lines (189 loc) • 9.36 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Nepali Multi Date Picker Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="nepali-date-picker.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism.min.css" rel="stylesheet" />
</head>
<body class="bg-light">
<div class="container">
<div class="py-5 text-center">
<a href="https://www.sanil.com.np" target="_blank"><img class="d-block mx-auto mb-5" src="logo.png" alt=""
height="72"></a>
<h1>Nepali Multi Select Date Picker</h1>
<p class="lead">
A simple yet powerful jQuery Nepali Date Picker. Supports both single and multiple date selection in
dual language. <br>
Multiple date selection can be done by pressing Shift or Control / Command key.
</p>
<p>
- <a class="text-dark" target="_blank" href="https://www.sanil.com.np"><strong>Sanil Shakya</strong></a>
</p>
</div>
<div class="row">
<div class="col-8 mt-3 offset-md-2">
<h2>Examples</h2>
<hr class="mb-5">
<h4 class="mb-3">Single Date Selection</h4>
<form>
<div class="form-group row">
<div class="col-sm-6">
<label for="staticEmail" class="col-form-label">Example 1.1</label>
<input type="text" class="date-picker form-control" data-single="1" name="date1" value=""
id="ex1" placeholder="Click here to select date">
</div>
<div class="col-sm-6">
<label for="staticEmail" class="col-form-label">Example 1.2</label>
<input type="text" class="date-picker form-control" data-single="true" name="date2" id="ex2"
value="2076-01-05" placeholder="Click here to select date">
</div>
</div>
</form>
<h4 class="mt-5 mb-3">Multiple Locale</h4>
<form>
<div class="form-group row">
<div class="col-sm-6">
<label for="staticEmail" class="col-form-label">Example 2.1</label>
<input type="text" class="date-picker form-control" data-single="1" data-locale="np"
name="date1" value="" placeholder="यहाँ क्लिक गर्नुहोस्">
</div>
<div class="col-sm-6">
<label for="staticEmail" class="col-form-label">Example 2.2</label>
<input type="text" class="date-picker form-control" data-single="1" data-locale="en"
name="date2" placeholder="Click here to select date">
</div>
</div>
</form>
<h4 class="mt-5 mb-3">Multiple Date Selection</h4>
<form>
<div class="form-group row">
<div class="col-sm-4">
<label for="staticEmail" class="col-form-label">Example 3.1</label>
<input type="text" class="date-picker form-control" name="date3"
placeholder="Click here to select date">
</div>
<div class="col-sm-4">
<label for="staticEmail" class="col-form-label">Example 3.2</label>
<input type="text" class="date-picker form-control" name="date4" value="2075-5-12"
placeholder="Click here to select date">
</div>
<div class="col-sm-4">
<label for="staticEmail" class="col-form-label">Example 3.3</label>
<input type="text" class="date-picker form-control" value="2076-12-11, 2076-12-12"
name="date5" placeholder="Click here to select date" data-show_all_dates="true">
</div>
<div class="col-sm-12 mt-3">
<label for="staticEmail" class="col-form-label">Example 3.4</label>
<div class="date-picker form-control" value="2081-08-01, 2081-08-05, 2081-04-12, 2080-04-20"
name="date6" data-show_all_dates="true"></div>
</div>
</div>
</form>
<h4 class="mt-5 mb-3">From / To Date Limits</h4>
<form>
<div class="form-group row">
<div class="col-sm-6">
<label for="staticEmail" class="col-form-label">Example 4.1</label>
<input type="text" class="date-picker form-control" name="date3"
data-date_after="2081-09-07" data-date_before="2081-09-15"
placeholder="Dates between 2081-09-07 and 2081-08-15">
</div>
<div class="col-sm-6">
<label for="staticEmail" class="col-form-label">Example 4.2</label>
<input type="text" class="date-picker form-control" name="date3" data-single="true"
data-date_after="2081-09-07" data-date_before="2081-09-15" data-locale="en"
placeholder="Dates between 2081-09-07 and 2081-08-15">
</div>
</div>
</form>
<br>
<h2 class="mt-5">Getting Started</h2>
<hr class="mb-4">
<h4>Installing</h4>
<p>Include these files</p>
<pre><code class="language-html"><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></code></pre>
<h4 class="mt-5">Usage</h4>
<p>Create an HTML input field and initialize with $.fn.nepaliDatePicker method.</p>
<pre><code class="language-js"><input type="text" class="datepicker" />
$('.datepicker').nepaliDatePicker();</code></pre>
<h4 class="mt-5">Single or Multiple Selection Mode</h4>
<p>By default it is in multiple date selection mode. If you want to use single date selection mode then
just add <code>data-single="true"</code> in your markup. [Example 1.1 and 1.2]</p>
<pre><code class="language-markup"><input class="datepicker" data-single="true"></code></pre>
<h4 class="mt-5">Nepali or English Language</h4>
<p>By default calendar will show in Nepali lanauge. To show in English language just add
<code>data-locale="en"</code> into your markup. [Example 2.1 and 2.2]
</p>
<pre><code class="language-markup"><input class="datepicker" data-locale="np"></code></pre>
<h4 class="mt-5">Restrict Date Selection</h4>
<p>By default calendar will show all the dates from Nepali calendar. If you want to restrict date just
pass <code>data-date_after</code> and <code>data-date_before</code> in your markup. [Example 4.1 and
4.2]</p>
<pre><code class="language-markup"><input class="datepicker" data-locale="np"></code></pre>
<h4 class="mt-5">Pass data as plugin properties</h4>
<p>All the options available as <code>data-*</code> can also be passed as plugin properties</p>
<pre><code class="language-js">$('.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
});</code></pre>
<h4 class="mt-5">Options</h4>
<p>In multiple date selection mode, selected date can be displayed in 3 different ways.</p>
<ul>
<li>If only 1 date is selected, it will show selected date as value in input field.
[Example 3.1 and 3.2]</li>
<li>If more than 1 date are selected, it will show the total number of dates selected as value.
[Example 3.1 and 3.2]</li>
<li>To show all dates as input value, use <code>data-show_all_dates="true"</code> in input
field.
[Example 3.3]
</li>
<li>To show dates as tags, use <code><div></code> instead of <code><input></code>.
[Example 3.4]</li>
<li>In all cases, actual dates are sent as hidden input fields.</li>
<pre><code class="language-html"><input class="datepicker" data-show_all_dates="true"></code></pre>
</ul>
<h4 class="mt-5">Hidden Features</h4>
<p>Some additional feature which may improve the user experiences.</p>
<ul>
<li>When calendar is open, press left or right arrow to switch to next months</li>
</ul>
<h4 class="mt-5">Download</h4>
<ul>
<li>Install via <a href="https://www.npmjs.com/package/nepali-multi-date-picker"
target="_blank">NPM</a><br />
<p><code>npm i nepali-multi-date-picker</code></p>
</li>
<li>Download this plugin from <a
href="https://github.com/sonill/Nepali-Multi-Date-Picker">GitHub.com</a></li>
</ul>
<h4 class="mt-5">Plugin Authors</h4>
<p><strong>Sanil Shakya</strong> - (<a href="https://www.sanil.com.np">https://www.sanil.com.np</a>)
</p>
<h4 class="mt-5">License</h4>
<p>This plugin is free to use in any commercial or personal project. Check license here : <a
href="https://github.com/sonill/Nepali-Multi-Date-Picker/blob/master/LICENSE">LICENSE.md</a>
</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="nepali-date-picker.min.js"></script>
<script>
jQuery(document).ready(function () {
$('.date-picker').nepaliDatePicker();
})
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>
</body>
</html>