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
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.