Calendar Control - Mix/Max Implementation
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! Calendar Control - Mix/Max Implementation</title>
<link rel="stylesheet" href="./examples/calendar/css/examples.css" type="text/css">
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<link type="text/css" rel="stylesheet" href="./build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./docs/assets/dpSyntaxHighlighter.css" />
<script type="text/javascript" src="./build/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="./build/calendar/assets/calendar.css">
<script language="javascript">
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1","cal1Container");
YAHOO.example.calendar.cal1.minDate = YAHOO.widget.DateMath.add(new Date(), YAHOO.widget.DateMath.DAY, 1);
YAHOO.example.calendar.cal1.render();
}
</script>
</head>
<body onload="init()">
<div id="pageTitle">
<h3>Calendar Control</h3>
</div>
<div class="column left">
<h4>Future-Only Single-Select Implementation</h4>
<p>To construct a calendar where the user can only select future dates, the code would read
as follows:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
var cal1;
function init() {
cal1 = new YAHOO.widget.Calendar("cal1", "cal1Container");
cal1.minDate = YAHOO.widget.DateMath.add(new Date(), YAHOO.widget.DateMath.DAY, 1);
cal1.render();
}
</textarea>
<p>Notice that we're setting the minimum date to tomorrow's date by adding one day to a
newly instantiated date (using the DateMath helper class) and setting it into the calendar's
minDate property. cal1.maxDate remains null since there is no restriction on how far into
the future the user can make selections.</p>
</div>
<div class="column right">
<div style="margin-left:auto;margin-right:auto;width:150px">
<div id="cal1Container"></div>
<div style="margin-left:auto;margin-right:auto;text-align:center;width:150px;clear:both">
<a href="javascript:YAHOO.example.calendar.cal1.reset()" class="navLink" style="font-size:12px;text-decoration:underline">reset</a>|
<a href="javascript:alert(YAHOO.example.calendar.cal1.getSelectedDates())" class="navLink" style="font-size:12px;text-decoration:underline">what's selected?</a>
</div>
</div>
</div>
<script src="./docs/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>
yui.zip( 3,714 k)Related examples in the same category