kalendae.js 最大特点是不依赖 jQuery等等,用起来也很方便
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="Kalendae-master/build/kalendae.css" type="text/css" charset="utf-8">
<script src="Kalendae-master/build/kalendae.standalone.js" type="text/javascript" charset="utf-8"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>文本框弹出日期控件</p>
<input type="text" class="auto-kal" data-kal="months: 2,mode:'multiple'" style="width:250px;" id="txtDay">
<input type="button" value="获得选中日期" id="btnDay" />
<script type="text/javascript">
$(function () {
$("#btnDay").click(function () {
var day = $("#txtDay").val();
alert(day);
});
});
</script>
<br /><hr /><br />
<p>日期框多选日期</p>
<div id="datepk"></div>
<input type="button" id="btnDay2" value="选中的日期" />
<script type="text/javascript">
$(function () {
var kal = new Kalendae(document.getElementById("datepk"), {
months: 3,
mode: 'multiple',
dayHeaderClickable: true,
});
$('#btnDay2').click(function () {
alert(kal.getSelected());//获取选中的日期
});
});
</script>
</body>
</html>