jQuery Datepicker for Bootstrap 4 – WBN Datepicker

The WBN Datepicker is a well designed, cross-browser and responsive date-picker plugin. This lightweight jQuery datepicker plugin uses jQuery UI & Bootstrap 4 CSS to works. It helps you to create date picker to pick date in three steps (first years, second months and then day) from a beautiful calendar.

Moreover, you can set default date, ranged date, start & ending date, minimum and maximum value of date.

Plugin Overview

Plugin: WBN Datepicker
Author: Webinative Technologies
Licence: MIT Licence
Published: June 2, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version and Bootstrap 4.1.3
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 33.1 KB

How to Make jQuery Datepicker for Bootstrap

1. Load the jQuery, jQuery UI and Bootstrap 4 CSS file into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

2. After that, include WBN Datepicker‘s CSS and JavaScript file.

<!-- Datepicker CSS -->
<link rel="stylesheet" href="static/css/wbn-datepicker.css">

<!-- Datepicker Js -->
<script src="static/js/wbn-datepicker.min.js"></script>

3. Create HTML structure for a simple datepicker.

<form action="">
        <div class="form-group">
          <label for="simple">Simple</label>
          <input type="text"
                 id="simple"
                 name="simple"
                 class="form-control wbn-datepicker" />
        </div>
</form>

4. Finally, initialize the plugin in jQuery document ready function.

$(document).ready(function(){

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

});

5. If you want to insert pre-define date in input field, you can use value attribute to insert date.

<input type="text" 
       id="value-specified" 
       name="value_specified"
       class="form-control wbn-datepicker"
       value="2017-03-26" />

6. Pass the data-min & data-max attributes to set the minimum and maximum date.

<input type="text" 
       id="value-specified" 
       name="value_specified"
       class="form-control wbn-datepicker"
       data-min="2017-01-15"
       data-max="2017-04-15" />
    

7. To create ranged date, use data-start-src="from-date-id" on end-date datepicker.

<input type="text" id="start-date"
       name="start_date" 
       class="form-control wbn-datepicker" />
<input type="text" id="end-date" 
       name="end_date"
       class="form-control wbn-datepicker"
       data-start-src="start-date" />