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.
<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"> <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).
In manual mode, you’ll have to call the $.dateSelect.show() method to open the date picker.
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.
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.
