Calendar Control - 2-Up Japanese Implementation : Calendar International « GUI Components « JavaScript DHTML
Calendar Control - 2-Up Japanese Implementation
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//JP" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! Calendar Control - 2-Up Japanese 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">
<link rel="stylesheet" href="./examples/calendar/intl_japan/css/Calendar_JP.css" type="text/css">
<script language="javascript">
/* Begin Japanese 2up Calendar */
YAHOO.widget.Calendar2up_JP_Cal = function(id, containerId, monthyear, selected) {
if (arguments.length > 0)
{
this.init(id, containerId, monthyear, selected);
}
}
YAHOO.widget.Calendar2up_JP_Cal.prototype = new YAHOO.widget.Calendar2up_Cal();
YAHOO.widget.Calendar2up_JP_Cal.prototype.customConfig = function() {
this.Config.Locale.MONTHS_SHORT = ["1\u6708", "2\u6708", "3\u6708", "4\u6708", "5\u6708", "6\u6708", "7\u6708", "8\u6708", "9\u6708", "10\u6708", "11\u6708", "12\u6708"];
this.Config.Locale.MONTHS_LONG = ["1\u6708", "2\u6708", "3\u6708", "4\u6708", "5\u6708", "6\u6708", "7\u6708", "8\u6708", "9\u6708", "10\u6708", "11\u6708", "12\u6708"];
this.Config.Locale.WEEKDAYS_1CHAR = ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"];
this.Config.Locale.WEEKDAYS_SHORT = ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"];
this.Config.Locale.WEEKDAYS_MEDIUM = ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"];
this.Config.Locale.WEEKDAYS_LONG = ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"];
this.Config.Options.START_WEEKDAY = 1;
}
/**********************************/
YAHOO.widget.Calendar2up_JP = function(id, containerId, monthyear, selected) {
if (arguments.length > 0)
{
this.buildWrapper(containerId);
this.init(2, id, containerId, monthyear, selected);
}
}
YAHOO.widget.Calendar2up_JP.prototype = new YAHOO.widget.Calendar2up();
YAHOO.widget.Calendar2up_JP.prototype.constructChild = function(id,containerId,monthyear,selected) {
var cal = new YAHOO.widget.Calendar2up_JP_Cal(id,containerId,monthyear,selected);
return cal;
};
/* End Japanese 2up Calendar */
YAHOO.namespace("example.calendar");
var today,link1,selMonth1,selDay1,selYear1,container1;
function initJapan() {
today = new Date();
var thisMonth = today.getMonth();
var thisDay = today.getDate();
var thisYear = today.getFullYear();
container1 = document.getElementById('container1');
link1 = document.getElementById('dateLink1');
selMonth1 = document.getElementById('selMonth1');
selDay1 = document.getElementById('selDay1');
selYear1 = document.getElementById('selYear1');
selMonth1.selectedIndex = thisMonth;
selDay1.selectedIndex = thisDay-1;
YAHOO.example.calendar.cal = new YAHOO.widget.Calendar2up_JP("YAHOO.example.calendar.cal","container1",(thisMonth+1)+"/"+thisYear,(thisMonth+1)+"/"+thisDay+"/"+thisYear);
YAHOO.example.calendar.cal.setChildFunction("onSelect",setDate1);
YAHOO.example.calendar.cal.title = "日付を選びなさい";
var renderSunday = function(cal,cell) {
YAHOO.util.Dom.addClass(cell, "sunday");
}
YAHOO.example.calendar.cal.addWeekdayRenderer(1, renderSunday);
YAHOO.example.calendar.cal.render();
}
function showCalendar1() {
var pos = YAHOO.util.Dom.getXY(link1);
YAHOO.example.calendar.cal.outerContainer.style.display='block';
YAHOO.util.Dom.setXY(YAHOO.example.calendar.cal.outerContainer, [pos[0],pos[1]+link1.offsetHeight+1]);
}
function setDate1() {
var date1 = YAHOO.example.calendar.cal.getSelectedDates()[0];
selMonth1.selectedIndex=date1.getMonth();
selDay1.selectedIndex=date1.getDate()-1;
YAHOO.example.calendar.cal.hide();
}
function changeDate1() {
var month = selMonth1.selectedIndex;
var day = selDay1.selectedIndex + 1;
var year = selYear1.options[selYear1.selectedIndex].value;
YAHOO.example.calendar.cal.select((month+1) + "/" + day + "/" + year);
YAHOO.example.calendar.cal.setMonth(month);
YAHOO.example.calendar.cal.setYear(year);
YAHOO.example.calendar.cal.render();
}
YAHOO.util.Event.addListener(window, "load", initJapan);
</script>
</head>
<body style="margin:0px">
<img src="img/ytravel.gif" id="bgImg">
<div style="position:absolute;left:230px;top:190px">
<select name="selYear1" id="selYear1" onchange="changeDate1()" style="vertical-align:middle">
<option value="2005" selected>2005年</option>
<option value="2006">2006年</option>
<option value="2007">2007年</option>
<option value="2008">2008年</option>
<option value="2009">2009年</option>
<option value="2010">2010年</option>
<option value="2011">2011年</option>
</select>
<select id="selMonth1" name="selMonth1" onchange="changeDate1()" style="vertical-align:middle">
<option value="Jan">1月</option>
<option value="Feb">2月</option>
<option value="Mar">3月</option>
<option value="Apr">4月</option>
<option value="May">5月</option>
<option value="Jun">6月</option>
<option value="Jul">7月</option>
<option value="Aug">8月</option>
<option value="Sep">9月</option>
<option value="Oct">10月</option>
<option value="Nov">11月</option>
<option value="Dec">12月</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 id="container1" style="position:absolute;display:none"></div>
<script src="./docs/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<?php echo yadl_spaceid( '792401524' ); ?>
</body>
</html>
yui.zip( 3,714 k)Related examples in the same category
| 1. | Calendar Control - 2-Up German Implementation | |