150 lines
No EOL
6.7 KiB
HTML
150 lines
No EOL
6.7 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 - Calendar & Select Fields (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: Calendar & Select Fields</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"><a href="../minmax/1.html">Minimum / Maximum Dates</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 selected"><a href="1.html">Calendar & Select Fields</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="../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>In this example, we will build a Calendar that can accept selections on any date from 1/1/2006 to 12/31/2008, and we will set up a series of select boxes that can be used to change the selected date. First, we will construct the Calendar with the minimum and maximum dates specified:</p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container",
|
|
{ mindate:"1/1/2006",
|
|
maxdate:"12/31/2008" });
|
|
</textarea>
|
|
|
|
<p>Next, we will place our markup, which includes a standard container for the Calendar, and the select elements needed to change the date:</p>
|
|
|
|
<textarea name="code" class="HTML" cols="60" rows="1">
|
|
<div id="cal1Container"></div>
|
|
|
|
<form name="dates">
|
|
<select id="selMonth" name="selMonth">
|
|
...
|
|
</select>
|
|
|
|
<select name="selDay" id="selDay">
|
|
...
|
|
</select>
|
|
|
|
<select name="selYear" id="selYear">
|
|
...
|
|
</select>
|
|
</form>
|
|
</textarea>
|
|
|
|
|
|
<p>Next, we must define a handler that will fire when the user changes the selected date on the Calendar. This function will be named <em>handleSelect</em>, and will be subscribed to the Calendar's <em>selectEvent</em>:</p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
function handleSelect(type,args,obj) {
|
|
var dates = args[0];
|
|
var date = dates[0];
|
|
var year = date[0], month = date[1], day = date[2];
|
|
|
|
var selMonth = document.getElementById("selMonth");
|
|
var selDay = document.getElementById("selDay");
|
|
var selYear = document.getElementById("selYear");
|
|
|
|
selMonth.selectedIndex = month;
|
|
selDay.selectedIndex = day;
|
|
|
|
for (var y=0;y<selYear.options.length;y++) {
|
|
if (selYear.options[y].text == year) {
|
|
selYear.selectedIndex = y;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
...
|
|
|
|
YAHOO.example.calendar.cal1.selectEvent.subscribe(handleSelect, YAHOO.example.calendar.cal1, true);
|
|
</textarea>
|
|
|
|
<p>The <em>handleSelect</em> function receives an array of selected dates as an argument. Since this Calendar is only single-select, we will only need to retrieve the first (and only) item in the array. The date argument is passed as an easily sorted Integer array in the format: [yyyy, mm, dd]. The <em>handleSelect</em> function uses this array to properly select the corresponding values in each select field. Note that it's also necessary to subscribe the function to the <em>selectEvent</em> on the Calendar so that it will be fired when a selection is made.</p>
|
|
|
|
<p>Next, we will define a function called <em>updateCal</em>, which will be used to update the Calendar with the field values that are selected in each select field:</p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
function updateCal() {
|
|
var selMonth = document.getElementById("selMonth");
|
|
var selDay = document.getElementById("selDay");
|
|
var selYear = document.getElementById("selYear");
|
|
|
|
var month = parseInt(selMonth.options[selMonth.selectedIndex].text);
|
|
var day = parseInt(selDay.options[selDay.selectedIndex].value);
|
|
var year = parseInt(selYear.options[selYear.selectedIndex].value);
|
|
|
|
if (! isNaN(month) && ! isNaN(day) && ! isNaN(year)) {
|
|
var date = month + "/" + day + "/" + year;
|
|
|
|
YAHOO.example.calendar.cal1.select(date);
|
|
YAHOO.example.calendar.cal1.cfg.setProperty("pagedate", month + "/" + year);
|
|
YAHOO.example.calendar.cal1.render();
|
|
}
|
|
}
|
|
</textarea>
|
|
|
|
<p>The <em>updateCal</em> function does two key things. First, it grabs the selected values from the select fields and uses them to make a new selection on the Calendar. Next, it changes the visible page of the Calendar to the Calendar's earliest selected date, so that the selection will be clear to the user. We can wire up the select fields to call <em>updateCal</em> when selections are made using the Event utility. In our example, we will do this after initializing the Calendar:</p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
YAHOO.util.Event.addListener(["selMonth","selDay","selYear"], "change", updateCal);
|
|
</textarea>
|
|
|
|
<p>It's worth noting that this example doesn't cover advanced features like date validation or randomly changing the selectable days based on the day of the month, so you are able to select invalid dates like February 31. Calendar automatically attempts to compensate for the extra invalid dates by moving the selection forward into the next month.</p>
|
|
<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> |