Modern & Slick Bootstrap Date Selector jQuery Plugin

by Posted on

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

Libraries

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

<!--CSS-->
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
	<link rel="stylesheet" href="css/jquery.dateselect.css">
 
<!--JS-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min.js"></script>
	<script type="text/javascript" src="js/jquery.dateselect.min.js"></script>

HTML

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>
</span>



In manual mode, you’ll have to call the $.dateSelect.show() 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>
</span>

JS

Now call the plugin configure options to customize date picker.

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

See live demos and download source code.

DEMO | DOWNLOAD

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.



Published by admin