blob: dd89beca56730e83bd4e877b2fa27a80b8832284 (
plain)
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
38
39
40
41
42
43
44
45
46
47
48
|
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Datepicker - Multiple Calendars Demo</title>
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3pre.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$('#datepicker').datepicker({
numberOfMonths: 3,
showButtonPanel: true
});
});
</script>
</head>
<body>
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
</div><!-- End demo -->
<div class="demo-description">
<p>
This datepicker shows three months at a time by setting the <code>numberOfMonths</code> option to 3.
This can be set to any number that will fit within your layout.
The multiple calendars are used to make it easier to visually scan across months and make a selection.
</p>
<div style="padding: 0pt 0.7em; margin-top: 20px;" class="ui-state-highlight ui-corner-all">
<p>
<span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-info"></span>
<strong>Note:</strong>
This is not a date range picker.
In a future release, a custom date range plugin will be added.
For users that want to use the old date range picker built into the datepicker, they must use the previous version of this plugin (v1.5.3).
</p>
</div>
</div><!-- End demo-description -->
</body>
</html>
|
