Calendar Control - 2-Up Implementation
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! Calendar Control - 2-Up Implementation</title>
<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() {
this.today = new Date();
var thisMonth = this.today.getMonth();
var thisDay = this.today.getDate();
var thisYear = this.today.getFullYear();
this.link1 = document.getElementById('dateLink1');
this.link2 = document.getElementById('dateLink2');
this.selMonth1 = document.getElementById('selMonth1');
this.selDay1 = document.getElementById('selDay1');
this.selMonth1.selectedIndex = thisMonth;
this.selDay1.selectedIndex = thisDay-1;
this.selMonth2 = document.getElementById('selMonth2');
this.selDay2 = document.getElementById('selDay2');
this.selMonth2.selectedIndex = thisMonth;
this.selDay2.selectedIndex = thisDay-1;
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar2up("YAHOO.example.calendar.cal1","container1",(thisMonth+1)+"/"+thisYear,(thisMonth+1)+"/"+thisDay+"/"+thisYear);
YAHOO.example.calendar.cal1.title = "Select your desired departure date:";
YAHOO.example.calendar.cal1.setChildFunction("onSelect",setDate1);
YAHOO.example.calendar.cal1.render();
YAHOO.example.calendar.cal2 = new YAHOO.widget.Calendar2up("YAHOO.example.calendar.cal2","container2",(thisMonth+1)+"/"+thisYear,(thisMonth+1)+"/"+thisDay+"/"+thisYear);
YAHOO.example.calendar.cal2.title = "Select your desired return date:";
YAHOO.example.calendar.cal2.setChildFunction("onSelect",setDate2);
YAHOO.example.calendar.cal2.render();
}
function showCalendar1() {
YAHOO.example.calendar.cal2.hide();
var pos = YAHOO.util.Dom.getXY(link1);
YAHOO.example.calendar.cal1.outerContainer.style.display='block';
YAHOO.util.Dom.setXY(YAHOO.example.calendar.cal1.outerContainer, [pos[0],pos[1]+link1.offsetHeight+1]);
}
function showCalendar2() {
YAHOO.example.calendar.cal1.hide();
var pos = YAHOO.util.Dom.getXY(link2);
YAHOO.example.calendar.cal2.outerContainer.style.display='block';
YAHOO.util.Dom.setXY(YAHOO.example.calendar.cal2.outerContainer, [pos[0],pos[1]+link2.offsetHeight+1]);
}
function setDate1() {
var date1 = YAHOO.example.calendar.cal1.getSelectedDates()[0];
selMonth1.selectedIndex=date1.getMonth();
selDay1.selectedIndex=date1.getDate()-1;
YAHOO.example.calendar.cal1.hide();
}
function setDate2() {
var date2 = YAHOO.example.calendar.cal2.getSelectedDates()[0];
selMonth2.selectedIndex=date2.getMonth();
selDay2.selectedIndex=date2.getDate()-1;
YAHOO.example.calendar.cal2.hide();
}
function changeDate1() {
var month = this.selMonth1.selectedIndex;
var day = this.selDay1.selectedIndex + 1;
var year = this.today.getFullYear();
YAHOO.example.calendar.cal1.select((month+1) + "/" + day + "/" + year);
YAHOO.example.calendar.cal1.setMonth(month);
YAHOO.example.calendar.cal1.render();
}
function changeDate2() {
var month = this.selMonth2.selectedIndex;
var day = this.selDay2.selectedIndex + 1;
var year = this.today.getFullYear();
YAHOO.example.calendar.cal2.select((month+1) + "/" + day + "/" + year);
YAHOO.example.calendar.cal2.setMonth(month);
YAHOO.example.calendar.cal2.render();
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body style="margin:0px">
<img src="./examples/calendar/default_2up/img/ytravel.gif" id="bgImg">
<div style="position:absolute;left:148px;top:275px">
<select id="selMonth1" name="selMonth1" onchange="changeDate1()" style="vertical-align:middle">
<option value="Jan">
Jan
</option>
<option value="Feb">
Feb
</option>
<option value="Mar">
Mar
</option>
<option value="Apr">
Apr
</option>
<option value="May">
May
</option>
<option value="Jun">
Jun
</option>
<option value="Jul">
Jul
</option>
<option value="Aug">
Aug
</option>
<option value="Sep">
Sep
</option>
<option value="Oct">
Oct
</option>
<option value="Nov">
Nov
</option>
<option value="Dec">
Dec
</option>
</select>
<select name="selDay1" id="selDay1" onchange="changeDate1()" style="vertical-align:middle">
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="3">
3
</option>
<option value="4">
4
</option>
<option value="5">
5
</option>
<option value="6">
6
</option>
<option value="7">
7
</option>
<option value="8">
8
</option>
<option value="9">
9
</option>
<option value="10">
10
</option>
<option value="11">
11
</option>
<option value="12">
12
</option>
<option value="13">
13
</option>
<option value="14">
14
</option>
<option value="15">
15
</option>
<option value="16">
16
</option>
<option value="17">
17
</option>
<option value="18">
18
</option>
<option value="19">
19
</option>
<option value="20">
20
</option>
<option value="21">
21
</option>
<option value="22">
22
</option>
<option value="23">
23
</option>
<option value="24">
24
</option>
<option value="25">
25
</option>
<option value="26">
26
</option>
<option value="27">
27
</option>
<option value="28">
28
</option>
<option value="29">
29
</option>
<option value="30">
30
</option>
<option value="31">
31
</option>
</select><a href="javascript:void(null)" onclick="showCalendar1()"><img id="dateLink1" src="./examples/calendar/img/pdate.gif" border="0" style="vertical-align:middle;margin:5px"/></a>
</div>
<div style="position:absolute;left:303px;top:275px">
<select id="selMonth2" name="selMonth2" onchange="changeDate2()" style="vertical-align:middle">
<option value="Jan">
Jan
</option>
<option value="Feb">
Feb
</option>
<option value="Mar">
Mar
</option>
<option value="Apr">
Apr
</option>
<option value="May">
May
</option>
<option value="Jun">
Jun
</option>
<option value="Jul">
Jul
</option>
<option value="Aug">
Aug
</option>
<option value="Sep">
Sep
</option>
<option value="Oct">
Oct
</option>
<option value="Nov">
Nov
</option>
<option value="Dec">
Dec
</option>
</select>
<select name="selDay2" id="selDay2" onchange="changeDate2()" style="vertical-align:middle">
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="3">
3
</option>
<option value="4">
4
</option>
<option value="5">
5
</option>
<option value="6">
6
</option>
<option value="7">
7
</option>
<option value="8">
8
</option>
<option value="9">
9
</option>
<option value="10">
10
</option>
<option value="11">
11
</option>
<option value="12">
12
</option>
<option value="13">
13
</option>
<option value="14">
14
</option>
<option value="15">
15
</option>
<option value="16">
16
</option>
<option value="17">
17
</option>
<option value="18">
18
</option>
<option value="19">
19
</option>
<option value="20">
20
</option>
<option value="21">
21
</option>
<option value="22">
22
</option>
<option value="23">
23
</option>
<option value="24">
24
</option>
<option value="25">
25
</option>
<option value="26">
26
</option>
<option value="27">
27
</option>
<option value="28">
28
</option>
<option value="29">
29
</option>
<option value="30">
30
</option>
<option value="31">
31
</option>
</select><a href="javascript:void(null)" onclick="showCalendar2()"><img id="dateLink2" src="./examples/calendar/img/pdate.gif" border="0" style="vertical-align:middle;margin:5px"/></a>
</div>
<div id="container1" style="position:absolute;display:none"></div>
<div id="container2" style="position:absolute;display:none"></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