A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.
It's fast and free.
processing...Retrieve Sign In
Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.
processing...Welcome to Webmonkey
- edit articles
- add to the code library
- design and write a tutorial
- comment on any Webmonkey article
Sign In Information Sent
YUI Calendar
/skill level/
/viewed/
(New page: This example code is part of our YUI JavaScript tutorial. It creates a calendar that you can add events to. <pre> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3...) |
|||
| Line 1: | Line 1: | ||
| - | |||
This example code is part of our YUI JavaScript tutorial. It creates a calendar that you can add events to. | This example code is part of our YUI JavaScript tutorial. It creates a calendar that you can add events to. | ||
| + | |||
| + | [http://www.webmonkey.com/tutorial/Create_Rich_Interfaces_With_the_YUI_Library Follow along with the tutorial] to learn how to use it. | ||
| + | |||
<pre> | <pre> | ||
Current revision
This example code is part of our YUI JavaScript tutorial. It creates a calendar that you can add events to.
Follow along with the tutorial to learn how to use it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>YUI: Calendar example</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/fonts/fonts-min.css&2.6.0/build/calendar/assets/skins/sam/calendar.css&2.6.0/build/carousel/assets/skins/sam/carousel.css">
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/calendar/calendar-min.js&2.6.0/build/element/element-beta-min.js&2.6.0/build/carousel/carousel-beta-min.js"></script>
<script type="text/javascript">
function addDateText(type,args,obj)
{
var datedata = args[0][0];
var year = datedata[0];
var month = datedata[1];
var day = datedata[2];
document.forms[0].datefield.value = month+'/'+day+'/'+year;
obj.hide();
}
function init_calendar()
{
var cal = new YAHOO.widget.Calendar("cal", { title:"Choose a date:", close:true } );
cal.render();
cal.hide();
// Show Calendar when text field gets focus
YAHOO.util.Event.addListener("datefield", "focus", cal.show, cal, true);
// Save calendar value inside text field
cal.selectEvent.subscribe(addDateText, cal, true);
}
YAHOO.util.Event.onDOMReady(init_calendar);
</script>
</head>
<body class="yui-skin-sam">
<form>
Date: <input type="text" id="datefield" />
<div id="cal"></div>
</form>
</body>
</html>
- This page was last modified 00:42, 15 November 2008.
/related_articles/
Special Offer For Webmonkey Users
WIRED magazine:
The first word on how technology is changing our world.
Registration on or use of this site constitutes acceptance of our User Agreement (Revised 4/2/2009) and Privacy Policy (Revised 4/2/2009).
Wired.com © 2009 Condé Nast Digital. All rights reserved.
The material on this site may not be reproduced, distributed, transmitted, cached or otherwise used, except with the prior written permission of Condé Nast Digital.