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: January 19, 2024
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" />

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...