aboutsummaryrefslogtreecommitdiffstats
path: root/demos/datepicker/multiple_calendars.html
blob: e213321ad27fb29d5f3e8316a4a2b0a9546ab40f (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
<!doctype html>
<html lang="en">
<head>
	<title>jQuery UI Datepicker - Default Demo</title>
	<link type="text/css" href="../demos.css" rel="stylesheet" />
	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
	<script type="text/javascript" src="../../ui/ui.core.js"></script>
	<script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
	<script type="text/javascript">
	$(function() {
		$('#date123').datepicker({
			numberOfMonths: 3,
			showButtonPanel: true
		});
	});
	</script>
</head>
<body>

<div class="demo">

<p>Date: <input type="text" id="date123"></p>

</div><!-- End demo -->



<div class="demo-description">

<p>This datepicker shows two months at a time by setting the numberOfMonths 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. 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.</p>

</div><!-- End demo-description -->


</body>
</html>