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" />
Similar Code Snippets:
CSS3 Animated Event Calendar with jQuery - Js Calendar
JavaScript Clock with Milliseconds
Pomodoro Clock Widget in HTML
45+ Dynamic Calendar in JavaScript Code with Example
jQuery Datepicker to Pick Year Only - YearPicker.js
Simple Date Picker in HTML Example - glDatePicker
JavaScript Alarm Clock with Sound
JavaScript Calculate Working Days
Beautiful 3D Analog Clock Widget In HTML
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.