<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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><sup>5</sup></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.
var options = { showOffDays: false,
endDate: '2015-05-26',
endDateFormat: 'YYYY-MM-DD',
selectedDate: '2015-05-24',
selectedDateFormat: 'YYYY-MM-DD'
}
$('#paginator').datepaginator(options);
/* uncomment to add event if date is changed
$('#paginator').on('selectedDateChanged', function(event, date) {
// Your logic goes here
alert('Date was changed.');
});
*/
});
