90 lines
No EOL
4.6 KiB
HTML
90 lines
No EOL
4.6 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
|
<title>YUI Calendar - Minimum / Maximum Dates (YUI Library)</title>
|
|
|
|
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
|
|
<link type="text/css" rel="stylesheet" href="../assets/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="doc3" class="yui-t4">
|
|
<div id="hd">
|
|
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
|
|
<h1>YUI Calendar: Minimum / Maximum Dates</h1>
|
|
</div>
|
|
|
|
<div id="bd">
|
|
|
|
<div id="toc" class="yui-b">
|
|
<ul>
|
|
<li class="sect"><a href="../index.html">YUI Calendar: Tutorials</a></li>
|
|
|
|
<li class="item"><a href="../quickstart/1.html">Quickstart Tutorial</a></li>
|
|
<li class="item"><a href="../multi/1.html">Multi-Select Calendar</a></li>
|
|
<li class="item"><a href="../dual/1.html">Dual Calendars</a></li>
|
|
<li class="item selected"><a href="1.html">Minimum / Maximum Dates</a></li>
|
|
<li class="child active"><a href="1.html">Setting up the Calendar</a></li>
|
|
<li class="child"><a href="2.html">Functional Example</a></li>
|
|
<li class="item"><a href="../events/1.html">Handling Events</a></li>
|
|
<li class="item"><a href="../formtxt/1.html">Calendar & Text Fields</a></li>
|
|
<li class="item"><a href="../formsel/1.html">Calendar & Select Fields</a></li>
|
|
<li class="item"><a href="../render/1.html">Using the Render Stack</a></li>
|
|
<li class="item"><a href="../germany/1.html">Localization: Germany</a></li>
|
|
<li class="item"><a href="../japan/1.html">Localization: Japan</a></li>
|
|
<li class="item"><a href="../popup/1.html">Popup Calendar</a></li>
|
|
</ul>
|
|
</div>
|
|
<div id="yui-main">
|
|
<div class="yui-b">
|
|
<h1 class="first">Setting up the Calendar</h1>
|
|
|
|
|
|
<p>Calendar can be easily configured to prevent users from being able to select dates before and after given minimum and maximum dates. For this tutorial, it is assumed that you are starting with the basic Calendar (outlined in the <a href="../quickstart/1.html">Quickstart Tutorial</a>). The setup for the basic Calendar looks like this:</p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
|
|
YAHOO.example.calendar.cal1.render();
|
|
</textarea>
|
|
|
|
<p>Enabling the minimum and maximum date features is as easy as adding additional arguments to the constructor's configuration object. In this tutorial, we will be working with three different configuration properties: <em>pagedate</em>, <em>mindate</em> and <em>maxdate</em>. In brief, here is a description of these properties and what they do:</p>
|
|
|
|
<ul class="properties">
|
|
<li><strong>pagedate</strong> - Specifies the month/year of the Calendar's initial view. For example, setting a value of "1/2006" would set the Calendar to January 2006.</li>
|
|
<li><strong>mindate</strong> - Specifies the minimum selectable date for the Calendar. All dates before the minimum date will be grayed out. The value can be specified as a JavaScript Date object or as a string (e.g. "1/25/2007").</li>
|
|
<li><strong>maxdate</strong> - Specifies the maximum selectable date for the Calendar. All dates after the maximum date will be grayed out. The value can be specified as a JavaScript Date object or as a string (e.g. "1/25/2007").</li>
|
|
</ul>
|
|
|
|
<p>Of course, you can specify these properties independently for different results. For instance, if you only wanted users to be able to select days following August 2, 2006, you would set the <em>mindate</em> property to "8/2/2006" and no dates prior would be selectable.</p>
|
|
|
|
<p>For this example, we will set the current month view to January 2006 using the <em>pagedate</em> property, and we will limit the Calendar's minimum selectable date to January 5, and the maximum selectable date to January 15.</p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container",
|
|
{ pagedate: "1/2006",
|
|
mindate: "1/5/2006",
|
|
maxdate: "1/15/2006" }
|
|
);
|
|
YAHOO.example.calendar.cal1.render();
|
|
</textarea>
|
|
|
|
<div id="stepnav">
|
|
<a class="next" href="2.html">Continue to <em>Functional Example</em> ></a> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="ft"> </div>
|
|
</div>
|
|
|
|
<script src="../../assets/dpSyntaxHighlighter.js"></script>
|
|
<script language="javascript">
|
|
dp.SyntaxHighlighter.HighlightAll('code');
|
|
</script>
|
|
|
|
</body>
|
|
</html> |