122 lines
No EOL
5.7 KiB
HTML
122 lines
No EOL
5.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 & Text 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 & Text 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 selected"><a href="1.html">Calendar & Text 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="../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>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 text field that will be updated whenever the Calendar's selected date is changed. In addition, we will provide a button that can be used to update the Calendar with whatever date the user types into a text field provided on the page. Note that this example requires the dependencies outlined in the <a href="../quickstart/1.html">Quickstart Tutorial</a>. 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 form with a text field and button:</p>
|
|
|
|
<textarea name="code" class="HTML" cols="60" rows="1">
|
|
<div id="cal1Container"></div>
|
|
|
|
<form name="dates">
|
|
<input type="text" name="date1" id="date1" />
|
|
<button type="button" id="update">< Update Calendar</button>
|
|
</form>
|
|
</textarea>
|
|
|
|
<p>Now, 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 txtDate1 = document.getElementById("date1");
|
|
txtDate1.value = month + "/" + day + "/" + year;
|
|
}
|
|
|
|
...
|
|
|
|
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 takes these values and prints them into a text field which we will define in a later step. 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 value that is typed into the text field. This function will be called via a button that will be created in our markup a little later.</p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
function updateCal() {
|
|
var txtDate1 = document.getElementById("date1");
|
|
|
|
// Select the date typed in the field
|
|
YAHOO.example.calendar.cal1.select(txtDate1.value);
|
|
|
|
var firstDate = YAHOO.example.calendar.cal1.getSelectedDates()[0];
|
|
|
|
// Set the Calendar's page to the earliest selected date
|
|
YAHOO.example.calendar.cal1.cfg.setProperty("pagedate", (firstDate.getMonth()+1) + "/" + firstDate.getFullYear());
|
|
|
|
YAHOO.example.calendar.cal1.render();
|
|
}
|
|
</textarea>
|
|
|
|
<p>The <em>updateCal</em> function does two key things. First, it grabs the value from the text field and uses it 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.</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> |