Modern & Slick Bootstrap Date Selector jQuery Plugin

IN my new jQuery post I am going to introduce awesome modern & slick bootstrap date selector plugin – jquery.dateselect.js There are a lot of date pickers out there, but this is new modern type of cool date selector for your website.

Integrate Modern & Slick Date Selector On Your Website


Include all the required plugin’s and supported libraries on page.

<link href='' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="">
	<link rel="stylesheet" href="">
	<link rel="stylesheet" href="css/jquery.dateselect.css">
<script type="text/javascript" src=""></script>
	<script type="text/javascript" src=""></script>
	<script type="text/javascript" src=""></script>
	<script type="text/javascript" src="js/jquery.dateselect.min.js"></script>


This awesome plugin has two operation modes: automatic or manual.

In automatic mode you’ll just have to add a data-* attribute and the plugin will do all the work (but for this to work, you must have also a valid HTML 5 DOCTYPE).

<input type="text" name="date1" id="date1" class="form-control" data-select="date">
<span class="input-group-btn">
	<button class="btn btn-primary" type="button" data-toggle="select"><i class="fa fa-calendar"></i></button>

In manual mode, you’ll have to call the $ method to open the date picker.

<input type="text" name="date2" id="date2" class="form-control">
<span class="input-group-btn">
	<button class="btn btn-primary btn-date" type="button"><i class="fa fa-calendar"></i></button>


Now call the plugin configure options to customize date picker.

$(function()  { 
 $('.btn-date').on('click', function(e) {
		element: 'input[name="date2"]'

See live demos and download source code.


Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.