摘要:multidatespicker
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="favicon.ico">
<title>MultiDatesPicker for jQuery UI</title>
<meta name="description" content="MDP is a little plugin that enables jQuery UI calendar to manage multiple dates.">
<meta name="keywords" content="Multiple Dates Picker, jQuery, jQuery UI, javascript, calendar, Luca Lauretta, dubrox">
<meta name="author" content="Luca Lauretta aka dubrox">
<!-- loads jquery and jquery ui -->
<!-- -->
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.1.js"></script>
<!-->
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.1.js"></script>
<!-- -->
<!-- loads mdp -->
<script type="text/javascript" src="jquery-ui.multidatespicker.js"></script>
<link rel="stylesheet" type="text/css" href="css/mdp.css">
<link rel="stylesheet" type="text/css" href="css/prettify.css">
<script type="text/javascript" src="js/prettify.js"></script>
<script type="text/javascript" src="js/lang-css.js"></script>
<script type="text/javascript">
$(function() {
prettyPrint();
});
</script>
<!-- mdp demo code -->
<script type="text/javascript">
<!--
$(function() {
var today = new Date();
var y = today.getFullYear();
$('#full-year').multiDatesPicker({
addDates: ['10/16/'+y, '02/19/'+y, '01/14/'+y, '11/16/'+y],
numberOfMonths: [1,3],
defaultDate: '1/1/'+y
});
$('#from-input').multiDatesPicker();
});
// -->
function SelectChange()
{
var today = new Date();
var y = today.getFullYear();
var sDate=$("#SelectBox2 option:selected").val();
$('#full-year').multiDatesPicker("addDates", sDate);
}
function AddDates()
{
var sDates= $("#from-input").val().split(',');
var arrDates= [];
for(var i=0;i<sDates.length;i++)
arrDates.push( new Date(sDates[i]));
$('#full-year').multiDatesPicker("addDates", arrDates);
//$('#full-year').multiDatesPicker("refresh");
}
function GetDates()
{
var dates = $('#full-year').multiDatesPicker('getDates');
alert("Result Dates: "+dates);
}
</script>
</head>
<body>
<div id="page">
<div id="how-to">
<ul>
<li class="demo full-row">
<h3>
Full year</h3>
<div id="full-year" class="box">
</div>
</li>
</ul>
</div>
<div>
<table border="2" width="900px">
<tr>
<td align="right" style="width: 200px">
<select name="drop1" id="SelectBox2" size="4" style="width: 100px; height: 200px"
onchange="SelectChange()" multiple="multiple">
<option value="01/15/2015">2015/01/15</option>
<option value="02/03/2015">2015/02/03</option>
<option value="03/13/2015">2015/03/13</option>
<option value="06/01/2015">2015/06/01</option>
<option value="07/01/2015">2015/07/01</option>
<option value="08/01/2015">2015/08/01</option>
<option value="09/01/2015">2015/09/01</option>
<option value="10/01/2015">2015/10/01</option>
</select>
</td>
<td>
<div class="box" id="from--input">
<input type="text" id="from-input" />
<input type="button" id="btnAddDates" value="Add Dates" onclick="AddDates()" />
</div>
<input type="button" id="Button1" value="Send" onclick="GetDates()" />
</td>
</tr>
</table>
</div>
</div>
</body>
</html>