Web Demo Mobile Demo Angular Demo Vue Demo React Demo

Restrict Date Range in DateBox

This example shows how to restrict the user to select only ten days from now.

源代码
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Restrict Date Range in DateBox - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
	<h2>Restrict Date Range in DateBox</h2>
	<p>This example shows how to restrict the user to select only ten days from now.</p>
	<div style="margin:20px 0;"></div>
	<input id="dd"></input>
	<script>
		$(function(){
			$('#dd').datebox().datebox('calendar').calendar({
				validator: function(date){
					var now = new Date();
					var d1 = new Date(now.getFullYear(), now.getMonth(), now.getDate());
					var d2 = new Date(now.getFullYear(), now.getMonth(), now.getDate()+10);
					return d1<=date && date<=d2;
				}
			});
		});
	</script>
</body>
</html>