User-friendly HTML5 Date Picker Plugin For jQuery - WBN Datepicker

An easy-to-use jQuery datepicker plugin that splits the normal date input into several fields (Year/Month/Week/Date) for easier date and date range selection from a dropdown select box.

How to use it:

1. Include the core stylesheet wbn-datepicker.css in the header of the webpage.

<link rel="stylesheet" href="wbn-datepicker.css">

2. Create a regular text input field on the webpage.

<input type="text" class="wbn-datepicker">

3. Include jQuery library and the JavaScript file wbn-datepicker.js at the bottom of the webpage.

<script src="/path/to/jquery.min.js"></script>
<script src="wbn-datepicker.min.js"></script>

4. The JavaScript to generate a default date picker for the input field.

$('.wbn-datepicker').datepicker()

5. Sometimes you might need to set the default/min/max dates:

<input type="text" 
       class="wbn-datepicker"
       value="2017-03-30"
>

<input type="text" 
       class="wbn-datepicker"
       data-min="2017-01-01"
       data-max="2017-12-31"
>

6. If you'd like to have a date range picker:

<input type="text" 
       id="start-date"
       class="wbn-datepicker"
>

<input type="text" 
       id="end-date"
       class="wbn-datepicker"
       data-start-src="start-date"
>

7. Create a date range picker with monthly or weekly repeat:

<!-- Monthly repeat -->
<input type="text" 
       id="start-date"
       class="wbn-datepicker"
>

<input type="text" 
       id="end-date"
       class="wbn-datepicker"
       data-start-src="start-date"
       data-repeat="monthly"
       data-repeat-day="0"
>

<!-- Weekly repeat -->
<input type="text" 
       id="start-date"
       class="wbn-datepicker"
>

<input type="text" 
       id="end-date"
       class="wbn-datepicker"
       data-start-src="start-date"
       data-repeat="weekly"
       data-repeat-day="0"
>

8. You can also set the value from JavaScript

var $datepicker = $('#value-specified-js').datepicker()
$datepicker.val('2017-05-31')

Change log:

2017-05-31

• Implements functionality to set date from Javascript
• Fixes a minor bug that caused incorrect months to be displayed in weekly repeat mode.

2017-04-07

• Implements fortnightly repeat

---

This awesome jQuery plugin is developed by Webinative. For more Advanced Usages, please check the demo page or visit the official website.