"Responsive Date Paginator"
Bootstrap 3.2.0 Snippet by mrmccormack

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/*
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.');
});
*/
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Just a note, the links in this snippet are dead. Looks like theres still a github of it though https://github.com/jonmiles...

Toby New () - 8 years ago - Reply 0


when I click on day, I want show event below. How can I do for this?

Yanwar () - 9 years ago - Reply 0