<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- - Required for bootstrap-paginaotr - Place these within head tag,(placing outside of head, causes HTML validation errors --> <link href="http://jondmiles.com/bootstrap-datepaginator/css/bootstrap.min.css" rel="stylesheet" media="screen" type="text/css"> <link href="http://jondmiles.com/bootstrap-datepaginator/css/bootstrap-datepicker.css" rel="stylesheet" media="screen" type="text/css"> <link href="http://jondmiles.com/bootstrap-datepaginator/css/bootstrap-datepaginator.min.css" rel="stylesheet" media="screen" type="text/css"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2>Responsive Date Paginator</h2> <img src="http://i.imgur.com/3eVyKZq.png?1" alt="" title="Pop-up calendar, by year, month"> <p> Best viewed: <a href="http://bootsnipp.com/iframe/A891V" target="_blank">full screen</a> </p> <div class="datepaginator" id="paginator"> </div> <hr> <div> <p>A jQuery plugin which takes Twitter Bootstrap's already great pagination component and injects a bit of date based magic. In the process creating a hugely simplified and modularised way of paging date based results in your application. <br> <a href="http://jondmiles.com/bootstrap-datepaginator/" target="_blank">Date Paginator Reference</a> </p> <p>Dates are selectable, scrollable and with the optional calendar select option thanks to eternicode's bootstrap-datepicker, you can easily jump to any calendar date.</p> </div> </div> </div> <p> <br> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2FA891V" target="_blank"><small>HTML</small>⁵</a> </p> </div> <script type="text/javascript" src="http://jondmiles.com/bootstrap-datepaginator/js/moment.min.js"></script> <script type="text/javascript" src="http://jondmiles.com/bootstrap-datepaginator/js/bootstrap-datepicker.js"></script> <script type="text/javascript" src="http://jondmiles.com/bootstrap-datepaginator/js/bootstrap-datepaginator.min.js"></script>

/* See more options at: http://jondmiles.com/bootstrap-datepaginator/#usage */ $(document).ready(function() { // This will wait for the DOM (your HTML) to be loaded before executing aFunction /* uncomment to use optios var options = { selectedDate: '2013-01-01', selectedDateFormat: 'YYYY-MM-DD' } $('#paginator').datepaginator(options); */ // defatult settings, i.e. today's date etc. $('#paginator').datepaginator(); /* uncomment to add event if date is changed $('#paginator').on('selectedDateChanged', function(event, date) { // Your logic goes here alert('Date was changed.'); }); */ });